• 微信号:Zh-y9213
您当前的位置:爱资源分享网 > > 网站源码 > 网页特效

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

栏目:网页特效时间:2021-06-22 22:59阅读数:44人阅读
一简单的九宫格转盘文字抽奖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>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:737597453@qq.com