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

简单的九宫格转盘文字抽奖js代码-精品资源网
简单的九宫格转盘文字抽奖js代码
此内容为免费资源,请登录后查看
0
免费资源

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

一简单的九宫格转盘文字抽奖js代码,支持自定义中奖文字,奖品序号,转盘速度等。

js代码

<script>
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].onclick=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].onclick=start;
				spans[8].style.cursor=\"pointer\";
				clearInterval(timer);
				prize.textContent=\'恭喜您抽中了\'+spans[num].textContent+\'!!!\';
			}
		},speed)
	}
spans[8].onclick=start;
</script>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容