html5 九格转盘 简单的九宫格转盘文字抽奖js代码

js代码

var prize= document.getElementById('prize');

var spans = document.querySelectorAll("div>span");

function start(){

// if(typeof(num)=='undefined'){

// // spans[num].classList.remove('aa'); // 清空上一次结果

// console.log('hhh')

// }

spans.forEach(function(el,index){

if(index!=0){

el.classList.remove('aa'); // 清空上一次结果

}

})

prize.textContent='';

spans[8].style.cursor="not-allowed";

spans[8].οnclick=null;

let num=-1; //奖品序号

let times=parseInt(Math.random()*(30-18+1)+18,10);

let time=0; //当前的旋转次数

let speed=100; //转盘速度

timer = setInterval(function(){

num++;

time++;

if(num > 7){

num = 0;

spans[0].classList.add('aa');

spans[7].classList.remove('aa');

}else if(num==0){

spans[num].classList.add('aa');

spans[7].classList.remove('aa');

}else{

spans[num].classList.add('aa');

spans[num-1].classList.remove('aa');

}

if(time>times){

spans[8].οnclick=start;

spans[8].style.cursor="pointer";

clearInterval(timer);

prize.textContent='恭喜您抽中了'+spans[num].textContent+'!!!';

}

},speed)

}

spans[8].οnclick=start;