原生js实现的一个随机颜色的简单效果
程序员文章站
2022-06-07 14:32:35
1 2 3 4 5 6
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>