Javascript點擊按鈕隨機改變數字與其顏色
編輯：關於JavaScript
先來看看效果圖
實例代碼
<!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++){//生成四位數
for(var j=0;j<6;j++){//隨機改變每個數字的顏色
color+=str.substr(parseInt(Math.random()*str.length),1);//取顏色(循環，每次提取一位，進行拼接組成6為顏色的值)
}
span[i].innerHTML=parseInt(Math.random()*10);//生成隨機數
span[i].style.color=("#"+color);//隨機改變每個span的顏色
color="";
}
}
</script>
</body>
</html>
以上就是這篇文章的全部內容，實現代碼很簡單，希望對大家能有一定的幫助，如果有問題可以留言交流，小編會盡快給大家回復的。
小編推薦
熱門推薦