先來看看效果圖
實例代碼
<!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>以上就是這篇文章的全部內容，實現代碼很簡單，希望對大家能有一定的幫助，如果有問題可以留言交流，小編會盡快給大家回復的。
新聞熱點
疑難解答
