Javascript點擊按鈕隨機改變數(shù)字與其顏色
更新時間：2016年09月01日 11:16:39 投稿：daisy
這篇文章主要介紹了Javascript點擊按鈕隨機改變數(shù)字和其字體的顏色，實現(xiàn)后的效果很不錯，具有一定的參考價值，有需要的可以參考借鑒，下面來一起看看。
先來看看效果圖
實例代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box {
margin: 100px auto;
width: 200px;
height: 150px;
line-height: 150px;
letter-spacing: 10px;
text-align: center;
font-size: 30px;
font-weight: bolder;
border: 2px solid palegreen;
word-wrap: break-word;
border-radius: 5px;;
position: relative;
}
#btn{
position: absolute;
left:50%;
top:280px;
}
</style>
</head>
<body>
<div id="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<input type="button" id="btn" value="我變了喲！"/>
<script>
//提取標簽
var box=document.getElementById("box");
var span=document.getElementsByTagName("span");
var btn=document.getElementById("btn");
var color="";
var str="0123456789abcdef";
btn.onclick=function(){
for(var i=0;i<span.length;i++){//生成四位數(shù)
for(var j=0;j<6;j++){//隨機改變每個數(shù)字的顏色
color+=str.substr(parseInt(Math.random()*str.length),1);//取顏色(循環(huán)，每次提取一位，進行拼接組成6為顏色的值)
}
span[i].innerHTML=parseInt(Math.random()*10);//生成隨機數(shù)
span[i].style.color=("#"+color);//隨機改變每個span的顏色
color="";
}
}
</script>
</body>
</html>
以上就是這篇文章的全部內(nèi)容，實現(xiàn)代碼很簡單，希望對大家能有一定的幫助，如果有問題可以留言交流，小編會盡快給大家回復的。
相關文章
通過百度地圖獲取公交線路的站點坐標的js代碼，需要的朋友可以參考下2012-05-05
第一次動手實現(xiàn)bootstrap table分頁效果
這篇文章主要為大家詳細介紹了第一次動手實現(xiàn)bootstrap table分頁效果的相關代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
下面小編就為大家分享一篇js 兩數(shù)組去除重復數(shù)值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了JS實現(xiàn)淡藍色簡潔豎向Tab點擊切換效果,通過JavaScript相應鼠標事件實現(xiàn)非常簡單的css樣式切換,簡單實用,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了IE下雙擊checkbox反應延遲問題的解決方法,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了js身份證判斷方法支持15位和18位,需要的朋友可以參考下2014-03-03
下面小編就為大家?guī)硪黄仙Ｕ刯avascript的類型轉(zhuǎn)換。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了JavaScript字符串包含問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要為大家詳細介紹了js+audio實現(xiàn)音樂播放器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09![JavaScript 事件監(jiān)聽實例代碼[兼容IE,firefox] 含注釋](http://img.jbzj.com/images/xgimg/bcimg9.png)
JavaScript 事件監(jiān)聽實例代碼[兼容IE,firefox] 含注釋
JavaScript事件監(jiān)聽完整實例 含注釋，非常的不錯，大家可以直接使用。2009-08-08