分享自己写的跑马灯抽奖。
1 2 3 8 4 7 6 5
效果
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>
时间： 2024-10-27 12:12:34