———— JS抽奖跑马灯 ————
分享自己写的跑马灯抽奖。
HTML代码
<!--首先将一个div的背景设为一个圆形--> <div style=" width:240px; height:232px; background-image:url(Roundel.png);"> <!--再在中间放一个div用margin搞到中间去--> <div style=" width:210px; height:210px; margin:15px 11px 15px 11px;"> <!-- 再在div里放table充满 --> <!--HTML代码,就是建立一个table设成这个样子,给存放奖品的td加一下统一的name--> <table id="tbroundel"> <tr> <td name="roundelgoods" id="turn1" >1</td><td name="roundelgoods" id="turn2" >2</td><td name="roundelgoods" id="turn3" >3</td> </tr> <tr> <td name="roundelgoods" id="turn8" >8</td><td id="RunDraw"><input id="btnrun" type="button" value="开始" onclick="startup()" /></td><td name="roundelgoods" id="turn4" >4</td> </tr> <tr> <td name="roundelgoods" id="turn7" >7</td><td name="roundelgoods" id="turn6" >6</td><td name="roundelgoods" id="turn5" >5</td> </tr> </table> </div> </div>
效果
css
<style type="text/css"> #tbroundel { width:210px; height:210px; } #tbroundel td { width:70px; height:70px; text-align:center; } #RunDraw { padding:0; text-align:center; } #RunDraw input { width:100%; height:100%; margin:0; background-color:Red; } </style>
js算法
<script type="text/javascript"> var t; ///用它存放setinterval,不用扣得太细,因为只要用到setinterval最后就得用 window.clearInterval(t);去释放他 var index = 1;/////这个用来记录当前循环的次数,比如点了抽奖要转四圈,每转一圈有8个奖品,那一共就要循环8*圈数 var circles = 1;////抽奖要转的圈数 var currentcircles = 1; ///记录当前是第几圈setinterval的第二个参数,通过操纵他来实现变速 var speed = 0;/////转动的速度,用它作为 var endpoint = 0; /////最后停止的位置,即选中了谁 ////抽奖开始 function startup() { ///点一次抽奖过程中按钮禁用 document.getElementById("btnrun").disabled = true; /////随机生成圈数,要跑几圈,不要太少了,太少了看着就不舒服。这里是生成4-14以内的随机整数 circles = Math.round(Math.random() * 10 + 3); /////终结点,生成1-8之内的随机数,因为你一圈有8个奖品 endpoint = Math.round(Math.random() * 8); ////当前的圈数 currentcircles = 1; ////速度,谁的太高了会很慢 speed = 700; ////当前循环的次数 index =1; /////取得放奖品的<td>的数组 var goods = document.getElementsByName("roundelgoods"); ////存放奖品的<td>的数组 var drawturn = []; ////遍历加入到drawturn数组里 for (var i = 0; i <(8); i++) { // document.getElementById("turn" + (i + 1)).style.border = "0"; ////加入时把他们的样式置为初始样式 document.getElementById("turn" + (i + 1)).style.fontSize = "large"; document.getElementById("turn" + (i + 1)).style.color = "black"; ///push方法,向数组内追加一个元素 drawturn.push(document.getElementById("turn"+(i+1))); } ////开始循环 t= setInterval(HighTurn,speed); } ///循环奖品方法 function HighTurn() { /////如果当前循环次数大于1,则当前循环说明不是1号奖品,那就得吧这个奖品的前一个兄弟的样式设为初始值 if (index > 1) { /////当然如果这时候index除以8余数为1的话说明这时至少循环完一圈且刚好又循环到1号奖品了,这就不能用(数组下标-1)的方法去清除样式了,因为他的前一位是上一次循环的8号奖品 if ((index % 8) == 1) { // document.getElementById("turn8").style.border = "0 document.getElementById("turn8").style.fontSize = " large"; document.getElementById("turn8").style.color = "black"; } ////如果不是的话就好说了,直接(数组下标-1)清除样式 else { //document.getElementById("turn" + ((index - (8 * (currentcircles - 1))) - 1)).style.border = "0"; document.getElementById("turn" + ((index - (8 * (currentcircles - 1))) - 1)).style.fontSize = " large"; document.getElementById("turn" + ((index - (8 * (currentcircles - 1))) - 1)).style.color = "black"; // document.getElementById("turn" + ((index - (8 * (currentcircles - 1))) - 1)).style.border = "3px solid #ccc"; } } ////处理完前一个商品的样式后再来改变当前奖品的样式——大号字体,红色 document.getElementById("turn" + (index - (8 * (currentcircles - 1)))).style.fontSize = " xx-large"; document.getElementById("turn" + (index - (8 * (currentcircles - 1)))).style.color = "red"; ///完事之后判读现在的循环次数除以8的余数是否为0,如果为零则说明一次循环已经到了最后一个奖品,接下来要进入下一圈了(不需要考虑第一次循环的,因为index的初始值是1,1/8不为0) if ((index % 8) == 0) { // 进入下一圈就得当前圈数+1 currentcircles++; } ///然后循环次数+1,不要把它放到圈数加1的前面去 index++; ///这里用来改变速度,在下设定的规则是在第一圈是每经过一个奖品则速度+80,setInterval的第二个参数是多长时间执行一次的意思,所以值越小,执行的频率越高 if (currentcircles == 1) { ///注意了,我就是因为没写这句话被闷了好半天,不写他的话你的程序会一直在跑setInterval释放不了。因为改变了setInterval的参数要让他生效的话就得重新执行(我也不懂,但是试了一下这样好使)。所以先把之前的清一下 window.clearInterval(t); ///改变速度 speed -= 80; ///在重新执行 t = setInterval(HighTurn, speed); } ///在下设定的在最后一圈的时候开始减速 else if (currentcircles == circles ) { window.clearInterval(t); speed += 80; t = setInterval(HighTurn, speed); } ////用来判断是否循环完了,如果当前圈数==要循环的圈数,且当前循环到的奖品编号==终结点则判定为循环结束,最终会停在终结点位置的奖品上 if (circles == currentcircles && ((index - 1) % 8) == endpoint) { ///清除setInterval window.clearInterval(t); ///回复按钮使用 document.getElementById("btnrun").disabled = false; alert("恭喜抽中了" + endpoint + "号奖品"); return; } } </script>