樣子有點戳，別見怪！O(∩_∩)O哈哈~ ...
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>跑馬燈</title> 6 <script src="../js/jquery-1.9.1.min.js"></script> 7 <style> 8 .maxdiv { 9 border: 2px red solid; 10 width: 510px; 11 height: 510px; 12 margin: 15% auto; 13 } 14 .maxdiv div { 15 width: 83px; 16 height: 83px; 17 border: 1px blue solid; 18 float: left; 19 text-align: center; 20 line-height: 83px; 21 } 22 .hiddendiv { 23 visibility: hidden; 24 } 25 26 .rightdiv { 27 clear: both; 28 float: right !important; 29 } 30 31 .bottomdiv { 32 float: right !important; 33 } 34 35 .leftdiv1 { 36 position: absolute; 37 margin-top: 339px; 38 } 39 40 .leftdiv2 { 41 position: absolute; 42 margin-top: 254px; 43 } 44 45 .leftdiv3 { 46 position: absolute; 47 margin-top: 171px; 48 } 49 50 .leftdiv4 { 51 position: absolute; 52 margin-top: 86px; 53 } 54 55 .startbtn { 56 position: absolute; 57 margin-left: 100px; 58 } 59 </style> 60 </head> 61 <body> 62 <div class="maxdiv"> 63 <div></div> 64 <div></div> 65 <div></div> 66 <div></div> 67 <div></div> 68 <div></div> 69 <div class="rightdiv"></div> 70 <div class="rightdiv"></div> 71 <div class="rightdiv"></div> 72 <div class="rightdiv"></div> 73 <div class="rightdiv"></div> 74 <div class="bottomdiv"></div> 75 <div class="bottomdiv"></div> 76 <div class="bottomdiv"></div> 77 <div class="bottomdiv"></div> 78 <div class="bottomdiv"></div> 79 <div class="leftdiv1"></div> 80 <div class="leftdiv2"></div> 81 <div class="leftdiv3"></div> 82 <div class="leftdiv4"></div> 83 <button class="startbtn">開始</button> 84 </div> 85 </body> 86 </html> 87 <script> 88 var i = 0, 89 num, 90 qs = 0, 91 timer1; 92 $(function () { 93 $(".startbtn").click(function () { 94 timer1 = setInterval(ttz, 100); 95 num = Math.floor(Math.random() * 20 + 1) + 1; 96 }); 97 }); 98 99 function ttz() { 100 if (i == 20) { i = 0; qs++; }//當i等於最大值的時候初始化為最小值，遍歷次數加一 101 if (i < 20) { 102 if (qs >= 2 && i == num) { clearInterval(timer1); qs = 0; i = 0; return; }//當遍歷次數大於2並且i等於隨機數的時候,停止遍歷 103 $(".maxdiv div").eq(i).css({ "background-color": "red" }).siblings().css({ "background-color": "#fff" }); 104 } 105 i++; 106 } 107 </script>
樣子有點戳，別見怪！O(∩_∩)O哈哈~
