你的位置:首页 > Java教程

[Java教程]JQ跑马灯


 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哈哈~