Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字與其顏色
更新時(shí)間：2016年09月01日 11:16:39 投稿：daisy
這篇文章主要介紹了Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字和其字體的顏色，實(shí)現(xiàn)后的效果很不錯(cuò)，具有一定的參考價(jià)值，有需要的可以參考借鑒，下面來一起看看。
先來看看效果圖
實(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>
以上就是這篇文章的全部內(nèi)容，實(shí)現(xiàn)代碼很簡單，希望對(duì)大家能有一定的幫助，如果有問題可以留言交流，小編會(huì)盡快給大家回復(fù)的。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于JavaScript中this指向問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
本文從代碼角度和宏觀角度簡單闡述了微信小程序在前端領(lǐng)域的一些內(nèi)容和影響，希望能夠幫助那些不了解微信小程序的開發(fā)者很快入門并認(rèn)識(shí)這一新的技術(shù)領(lǐng)域。2016-12-12
如何讓一個(gè)層關(guān)閉之后，就算刷新頁面了也不顯示。除非關(guān)閉頁面再次打開
這個(gè)功能，一般可用于廣告的顯示，當(dāng)關(guān)閉后，就不顯示，除非重新關(guān)閉打開，增加用戶體驗(yàn)2008-09-09
這篇文章介紹了JavaScript屬性的操作，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
小程序如何寫動(dòng)態(tài)標(biāo)簽的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序如何寫動(dòng)態(tài)標(biāo)簽的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
javascript中callee與caller的區(qū)別分析
有些小伙伴可能會(huì)問caller,callee 是什么？在javascript 中有什么樣的作用？那么本篇會(huì)對(duì)于此做一些基本介紹。希望能夠?qū)Υ蠹依斫鈐avascript中的callee與caller有所幫助。2015-04-04
原生JS實(shí)現(xiàn)表單checkbook獲取已選擇的值
本文為大家介紹下采用原生JS實(shí)現(xiàn)從一個(gè)表單checkbox獲取到已選中的數(shù)據(jù)值，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
這篇文章主要為大家詳細(xì)介紹了用微信小程序?qū)崿F(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
JavaScript實(shí)現(xiàn)電商平臺(tái)商品細(xì)節(jié)圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)電商平臺(tái)商品細(xì)節(jié)圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家介紹了postMessage及webSocket跨域方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10