原生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>

posted @ 2019-08-27 16:49  前端鹏鹏  阅读(455)  评论(0)    收藏  举报