jQuery幸运大转盘抽奖代码

来源:https://www.sucaihuo.com/js/5197.html 2021-02-02 09:28浏览(364) 收藏

一款简单的jQuery幸运大转盘抽奖代码,随着大转盘的转动,奖品文字提示也不断跟随变化。
jQuery幸运大转盘抽奖代码
分类:抽奖 > 转盘 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(function () {
	    var nums = new Array();          //存取每个li的旋转角度
	    var num = 0;                     //旋转角度
	    var r=0;
		var g=0;
		var b=0;
	    $('ul li').each(function (i,ele) {
	        nums.push(num);
	        num+=20;                                     //设置每个li旋转角度
	        r = Math.floor(Math.random()*19*10+60);      //生成随机颜色
	        g = Math.floor(Math.random()*19*10+60);
	        b = Math.floor(Math.random()*18*10+70);
			
	        $(ele).css({transform: 'rotate('+num+'deg)'});    
	        $(ele).css({borderLeft: '340px solid rgba('+r+', '+g+', '+b+', 1)' });
	    })
	
	
	    //点击部分
	    var overlotto;
		var overTime;
	    $('.img').click(function () {
			$(this). css({ pointerEvents: 'none'})        //关闭按钮
			var rTime = Math.random()*6+8;  //随机生成转动时间
			var p = 10;   //设置转动速度
			var num = 0;  //记录当前调用次数1秒每次
			overTime = setInterval(function(){
				num++;
				if(rTime-num <= 8){  //时间剩余8秒开始减速
					p+=3;
				}
				clearInterval(overlotto);         //关闭上一次的转动,防止出现多个调用
				overlotto = setInterval(lottorRotate,p);	
			},1000)
			
				
			console.log(rTime);
			setTimeout(function(){          //结束关闭所有时间函数
				clearInterval(overTime);   
				clearInterval(overlotto);	 
				$('.img'). css({ pointerEvents: 'auto'})   //开启按钮
			},rTime*1000)
			
	    })
		
		
	    //旋转部分
	    function lottorRotate() {
	        $('ul li').each(function (i,ele) {
	            nums[i]+=5;
	            if (nums[i] >= 360){
	                nums[i] = 0;
	            }
	            var num = $(ele).css({transform: 'rotate('+nums[i]+'deg)'});
	            if (nums[i] >= 79 && nums[i] <= 101){
	                $('.tt').html("惩罚获得:"+$('ul li:eq('+i+')').text()+"!")
	            }
	            
	        })
	    }
	})
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2