这是一个简单的 4x4 抽奖的 demo。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{padding:0;margin:0;} .box{width: 400px;height: 400px;margin: 140px auto 0} .img1{background: pink;} .img2{background: gold;} .img3{background: red;} .img4{background: blue;} .img5{background: purple;} .img6{background: green;} table{width: 100%;height:100%;} tr{width: 100%;height: 25%;} td{width: 25%;height:25%;} #start{text-align: center;} </style> </head> <body> <div class="box"> <table> <tr> <td class="img1" prize="感谢参与!"></td> <td class="img2" prize="恭喜获得ipad!"></td> <td class="img3" prize="感谢获得耳机!"></td> <td class="img4" prize="感谢获得鞋子!"></td> </tr> <tr> <td class="img5" prize="感谢获得手机!"></td> <td colspan="2" rowspan="2" id="start">点我抽奖</td> <td class="img6" prize="感谢获得布娃娃!"></td> </tr> <tr> <td class="img1" prize="感谢获得手机!"></td> <td class="img2" prize="感谢获得布娃娃!"></td> </tr> <tr> <td class="img3" prize="感谢参与!"></td> <td class="img4" prize="恭喜获得ipad!"></td> <td class="img5" prize="感谢获得耳机!"></td> <td class="img6" prize="感谢获得鞋子!"></td> </tr> </table> </div> <script> var startNum = 0; var str = document.getElementById("start"); str.onclick = function(){ running(); } function running() { var runing = false; if(runing === false) { runing = true; var td = document.getElementsByTagName("td"); var len = td.length; randomLen = random(2*len, 3*len); var num = startNum; var speed = 50; var flag = true; var timer = setInterval(function(){ for(var i= 0; i<len; i++) { td[i].style.background = ""; }; td[num].style.background = "#000"; if(speed > randomLen * 20) { clearInterval(timer); flag = true; num === 1 ? num = 2 : " "; startNum = num; runing = false; alert(td[num].getAttribute("prize")); }; if( num === 3 ) { num += 3; } else if( num === 6) { num += 2; } else if( num === 8) { num += 4; } else if(num >= 10 && num <= 12 ) { num --; } else if( num === 9) { num -= 2; } else if( num === 7) { num -= 3; } else if( num === 4) { num -= 4; }else { num ++; }; if(speed > 0 && flag) { speed -= 10; }else { flag = false; speed += 20; } console.log(speed); },speed); }else { return false; } }; function random(min , max) { return Math.floor(min + Math.random() * (max - min)); }; </script> </body> </html>