目前好多的微信活動都有一些抽獎活動，其中就有跑馬燈。
<!DOCTYPE html> <html> <head> <title>跑馬燈效果</title> <style> table .pao{ border:1px solid #e5e5e5; padding:10px 20px; } table .on{ border-color:red; color:red; } </style> <script> window.onload = function(){ var paomadeng = { currentIndex : 1, //當前索引 indexCount : 12, //個數 timer : 0, //定時器 currentCycle : 0, //當前圈數 cycles : 4, //跑的圈數 speed : 400, //速度，即定時器的時間間隔 key : 0, //鑰匙,隨機數 btn : 0, //觸發按鈕 classPrefix : "pao-", //元素類名class前綴 reset : function(){ //觸發對象 paomadeng.btn = this; paomadeng.btn.style.display = "none"; clearInterval(paomadeng.timer); paomadeng.currentCycle = 0; paomadeng.speed = 400; paomadeng.key = Math.ceil(Math.random() * paomadeng.indexCount); console.log("key:" + paomadeng.key); paomadeng.run(); }, run : function(){ console.log("speed:" + paomadeng.speed); var before = paomadeng.currentIndex == 1 ? paomadeng.indexCount : paomadeng.currentIndex - 1; //設置上一索引的類名 var beforeNode = document.getElementsByClassName(paomadeng.classPrefix + before)[0]; var beforeClassNewName = beforeNode.className.replace("on",""); beforeNode.className = beforeClassNewName; //設置當前索引的類名 var currentNode = document.getElementsByClassName(paomadeng.classPrefix + paomadeng.currentIndex)[0]; currentNode.className += " on"; //注意前面有空格 paomadeng.upSpeed(); paomadeng.downSpeed(); paomadeng.currentIndex += 1; paomadeng.currentIndex = paomadeng.currentIndex > paomadeng.indexCount ? 1: paomadeng.currentIndex; }, //加速 upSpeed : function(){ //前2圈且speed>100時加速 if(paomadeng.currentCycle < 2 && paomadeng.speed > 100){ paomadeng.speed -= 5 * paomadeng.currentIndex ; paomadeng.stop(); paomadeng.start(); } }, //增加圈數 並 減速 downSpeed : function(){ //增加圈數 if(paomadeng.currentIndex == paomadeng.indexCount){ paomadeng.currentCycle += 1; } //如果當前所跑圈數小於總圈數-1 並且 速度小於400，那么減速 if(paomadeng.currentCycle > paomadeng.cycles-1 && paomadeng.speed < 400){ paomadeng.speed += 20; paomadeng.stop(); paomadeng.start(); } //如果當前所跑圈數大於總圈數 且 索引值等於key，那么停止奔跑 if(paomadeng.currentCycle > paomadeng.cycles && paomadeng.currentIndex == paomadeng.key){ paomadeng.stop(); paomadeng.showPrize(); } }, stop : function(){ clearInterval(paomadeng.timer); }, start : function(){ paomadeng.timer = setInterval(paomadeng.run , paomadeng.speed); }, showPrize : function(){ //過一會再顯示提示信息 setTimeout(function(){ alert("恭喜，你中了" + paomadeng.key + "等獎"); paomadeng.btn.style.display = "block"; },700); } }; document.getElementById("startPao").onclick= paomadeng.reset; }; </script> </head> <body> <div class="container"> <table> <tr> <td class="pao pao-1">1</td> <td class="pao pao-2">2</td> <td class="pao pao-3">3</td> <td class="pao pao-4">4</td> </tr> <tr> <td class="pao pao-12">12</td> <td class="pao"></td> <td class="pao"></td> <td class="pao pao-5">5</td> </tr> <tr> <td class="pao pao-11">11</td> <td class="pao"></td> <td class="pao"></td> <td class="pao pao-6">6</td> </tr> <tr> <td class="pao pao-10">10</td> <td class="pao pao-9">9</td> <td class="pao pao-8">8</td> <td class="pao pao-7">7</td> </tr> </table> <br/> <input type="button" value="開始跑" id="startPao" /> </div> </body> </html>