js表格组字

xiaoxiao2021-03-01  31

在这里我仅仅用这种方法写成了一个孟字,仅仅用来举例,如果你想表白那就需要自己动脑筋了!

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .demo1{ width: 500px; height: 500px; background-color: greenyellow; } .demo2{ width: 40px; height: 40px; border: solid 5px; float: left; } </style> </head> <script type="text/javascript"> function xunhuan () { for (var i = 0; i<10; i++) { } } </script> <body> <div class="demo1"> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <div class="demo2"></div> <button id="bian" onclick="change()">点击这里</button> </div> </body> <script type="text/javascript"> function change () { var i = 0; var demo2 = document.getElementsByClassName('demo2'); console.log(demo2); setInterval(function () { if (i>=100) { return ; } if (i==2||i == 3||i==4||i==5||i==6||i==7||i==16||i==25||i==32||i==33|| i==34||i==35||i==36||i==37||i ==43||i==45||i==54||i==55||i==61||i==62||i==63 ||i==64||i==65||i==66||i==67||i==68||i==71||i==73||i==76||i==78||i==81||i==83 ||i==86||i==88||i==90||i==91||i==92||i==93||i==94||i==95||i==96||i==97||i==98||i==99){ demo2[i].style.backgroundColor='yellow'; }else{ demo2[i].style.backgroundColor='aquamarine' } i++; },70); } </script> </html>

转载请注明原文地址: https://www.6miu.com/read-3649930.html

最新回复(0)