借鉴了其他开发人员的逻辑
2021-02-16（九宫格抽奖）
借鉴了其他开发人员的逻辑
var container = document.getElementById('container'),
li = container.getElementsByTagName('li'),
img = container.getElementsByTagName('img'),
span = document.getElementById('startbutton'),
message = document.getElementById('message'),
timer = null;
bReady = true;//定义一个抽奖开关
var prize = [0,1,2,4,7,6,5,3];//奖品li标签滚动的顺序
var num = 0;//num用来存放得到的随机函数，也就是抽中的奖品
var orignUrl = ''//保存选中的图片地址
var prizenum = ''//随机的数字
var arrImg = ['images/1.png','images/2.png','images/3.png','images/4.png','images/5.png','images/6.png','images/7.png','images/8.png']
//开始抽奖
function startlottery(){
// 重置列表数据
for(var k = 0 ; k < img.length; k++){
for(var v = 0 ; v < arrImg.length; v++){
if(k == v){
img[k].src = arrImg[v]
}
}
}
if(bReady){//当抽奖开关为true的时候，可点击抽奖
message.style.display="none";//将获奖信息div隐藏（以防止上次抽奖信息还显示）
span.style.background="#ada7a8";
bReady = false;//抽奖开关设为false 处于抽奖中 即不能点击抽奖
num = getrandomnum(1,9)//得到一个随机数（即奖品）
startinit(num);//执行抽奖初始化
}
}
//抽中的奖品 返回1-9的整数，包含1，不包含9
function getrandomnum(n, m) {
return parseInt((m - n) * Math.random() + n);
}
//抽奖初始化
function startinit(num) {
var i = 0; //定义一个i 用来计算抽奖跑动的总次数
var t =200; //抽奖跑动的速度 初始为200毫秒
var rounds = 5; //抽奖转动的圈数
var rNum = rounds*8; //标记跑动的次数（这是一个条件判断分界线）
timer = setTimeout(startscroll, t);//每t毫秒执行startscroll函数
//抽奖滚动的函数
function startscroll() {
//每次滚动抽奖将所有li的class都设为空
for(var j = 0; j < li.length; j++) {
li[j].className = '';
}
prizenum = prize[i%li.length]; //通过i余8得到此刻在prize数组中的数字，该数字就是mask标记出现的位置
li[prizenum].className = "active";
i++;
if(i timer = setTimeout(startscroll, t);//继续执行抽奖滚动 }else if(i>= rNum-8 && i< rNum+num){ //t时间变长，此时计时器运行速度降低，同时标签刷新速度也降低 t+=(i-rNum+8)*5; timer = setTimeout(startscroll, t);//继续执行抽奖滚动 } if(i >= rNum+num){//当i大于转rNum加随机数字num次计时器结束，出现提示框提示中奖信息 if(num==1){ message.innerHTML="飞机"; }else if(num==2){ message.innerHTML="火车"; }else if(num==3){ message.innerHTML="高铁"; }else if(num==4){ message.innerHTML="单车"; }else if(num==5){ message.innerHTML="汽车"; }else if(num==6){ message.innerHTML="滑板"; }else if(num==7){ message.innerHTML="摩托"; }else if(num==8){ message.innerHTML="感谢"; } var timer2 = null; timer2 = setTimeout(function(){ message.style.display="block";//奖品展示的信息为显示状态 span.style.background="#ff3a59"; li[prizenum].className = ""; orignUrl = img[prizenum].src img[prizenum].src = "images/maskPng.png"; clearTimeout(timer2); },1000); bReady = true;//当计时器结束后让span标签变为抽奖状态 clearTimeout(timer); } } }