Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字與其顏色
更新時(shí)間：2016年09月01日 11:16:39 投稿：daisy
這篇文章主要介紹了Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字和其字體的顏色，實(shí)現(xiàn)后的效果很不錯(cuò)，具有一定的參考價(jià)值，有需要的可以參考借鑒，下面來(lái)一起看看。
先來(lái)看看效果圖
實(shí)例代碼
<!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>
//提取標(biāo)簽
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++){//隨機(jī)改變每個(gè)數(shù)字的顏色
color+=str.substr(parseInt(Math.random()*str.length),1);//取顏色(循環(huán)，每次提取一位，進(jìn)行拼接組成6為顏色的值)
}
span[i].innerHTML=parseInt(Math.random()*10);//生成隨機(jī)數(shù)
span[i].style.color=("#"+color);//隨機(jī)改變每個(gè)span的顏色
color="";
}
}
</script>
</body>
</html>
以上就是這篇文章的全部?jī)?nèi)容，實(shí)現(xiàn)代碼很簡(jiǎn)單，希望對(duì)大家能有一定的幫助，如果有問(wèn)題可以留言交流，小編會(huì)盡快給大家回復(fù)的。
相關(guān)文章
通過(guò)百度地圖獲取公交線路的站點(diǎn)坐標(biāo)的js代碼
通過(guò)百度地圖獲取公交線路的站點(diǎn)坐標(biāo)的js代碼，需要的朋友可以參考下2012-05-05
第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁(yè)效果的相關(guān)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例
下面小編就為大家分享一篇js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
JS實(shí)現(xiàn)淡藍(lán)色簡(jiǎn)潔豎向Tab點(diǎn)擊切換效果
這篇文章主要介紹了JS實(shí)現(xiàn)淡藍(lán)色簡(jiǎn)潔豎向Tab點(diǎn)擊切換效果,通過(guò)JavaScript相應(yīng)鼠標(biāo)事件實(shí)現(xiàn)非常簡(jiǎn)單的css樣式切換,簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10
IE下雙擊checkbox反應(yīng)延遲問(wèn)題的解決方法
這篇文章主要介紹了IE下雙擊checkbox反應(yīng)延遲問(wèn)題的解決方法,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了js身份證判斷方法支持15位和18位,需要的朋友可以參考下2014-03-03
老生常談javascript的類(lèi)型轉(zhuǎn)換
下面小編就為大家?guī)?lái)一篇老生常談javascript的類(lèi)型轉(zhuǎn)換。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
這篇文章主要介紹了JavaScript字符串包含問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
js+audio實(shí)現(xiàn)音樂(lè)播放器
這篇文章主要為大家詳細(xì)介紹了js+audio實(shí)現(xiàn)音樂(lè)播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09![JavaScript 事件監(jiān)聽(tīng)實(shí)例代碼[兼容IE,firefox] 含注釋](http://img.jbzj.com/images/xgimg/bcimg9.png)
JavaScript 事件監(jiān)聽(tīng)實(shí)例代碼[兼容IE,firefox] 含注釋
JavaScript事件監(jiān)聽(tīng)完整實(shí)例 含注釋，非常的不錯(cuò)，大家可以直接使用。2009-08-08