原生js实现的一个随机颜色的简单效果
Posted zhengyunpeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现的一个随机颜色的简单效果相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title></title> 7 <style> 8 table 9 width:100%; 10 /* border:1px solid #000; */ 11 border-collapse: collapse; 12 13 td 14 /* border:1px solid #000; */ 15 height:10px; 16 17 </style> 18 </head> 19 <body> 20 <table id="tab"></table> 21 <button onclick="start()">继续</button> 22 </body> 23 <script> 24 var clr=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"]; 25 var tab=document.getElementById("tab"); 26 for(var i=0;i<15;i++) 27 var r=document.createElement("tr"); 28 tab.appendChild(r); 29 for(var j=0;j<25;j++) 30 var cc="#" 31 for(var z=0;z<6;z++) 32 var n=Math.floor(Math.random()*16); 33 cc+=clr[n]; 34 35 var d=document.createElement("td"); 36 d.style.background=cc; 37 tab.children[i].appendChild(d); 38 39 40 function changeColor(ccc) 41 var dd=document.getElementsByTagName("td"); 42 for(var i=0;i<dd.length;i++) 43 if(ccc) 44 dd[i].style.background=ccc; 45 else 46 var cc="#" 47 for(var z=0;z<6;z++) 48 var n=Math.floor(Math.random()*16); 49 cc+=clr[n]; 50 51 dd[i].style.background=cc; 52 53 54 55 56 var b; 57 function start() 58 clearInterval(b); 59 b=setInterval("changeColor()",100); 60 61 tab.onclick=function(e) 62 var that=e.target 63 if(that.nodeName=="TD") 64 var ys=that.style.background; 65 clearInterval(b); 66 changeColor(ys); 67 68 69 </script> 70 </html>
以上是关于原生js实现的一个随机颜色的简单效果的主要内容，如果未能解决你的问题，请参考以下文章