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 ...
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>
