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