九宫格大转盘抽奖

最新推荐文章于 2023-09-04 17:01:55 发布

zzz-ing

最新推荐文章于 2023-09-04 17:01:55 发布

阅读量1.4k

点赞数 1

分类专栏： js 文章标签：大转盘九宫格大转盘抽奖

本文链接：https://blog.csdn.net/lucky_Zeng/article/details/100522664

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

页面效果如下：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <title>九宫格转盘</title>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <meta name="description" content="">
  <style type="text/css">
 html{font-family:PingFang-SC-Light,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Helvetica Neue,Helvetica,STHeiTi,Arial,sans-serif;text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,select,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}body{color:#434343;background-color:white;height:100%;overflow-x:hidden;-webkit-overflow-scrolling:touch;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}ul,ol{list-style:none outside none;}#lottery{width:12.31rem;height:10.6rem;margin:1.62rem  auto 0;padding:0.3rem 0.41rem;box-sizing:border-box;}#lottery ul{font-size:0;}#lottery ul li{width:3.71rem;height:3.2rem;background:#f9d933;border-radius:0.26rem;margin-right:0.17rem;margin-bottom:0.17rem;display:inline-block;vertical-align:top;text-align:center;color:#1b1b1b;}#lottery ul li.alone p{line-height:1.37rem}#lottery ul li p{height:1.37rem;line-height:0.64rem;font-size:0.6rem;margin:0.92rem auto;}#lottery ul li.lottery-go{background:#eb450e;color:#f9d933;cursor:pointer;}#lottery ul li.lottery-go p{font-size:1.6rem;}#lottery ul li.active.lottery-unit{background:#4699fa;color:#fff;}#lottery ul li:last-of-type{margin-right:0;}#lottery ul:last-of-type li{margin-bottom:0;}
  </style>

  <script>!function(e){function t(i){
if(n[i])return n[i].exports;var o=n[i]={
exports:{
},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={
};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t){
"use strict";!function(e){function t(){
var t=a.getBoundingClientRect().width;t/n>540&&(t=540*n),e.rem=t/16,a.style.fontSize=e.rem+"px"}var n,i,o,r=window.document,a=r.documentElement,d=r.querySelector('meta[name="viewport"]');if(d){
var s=d.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);s&&(i=parseFloat(s[2]),n=parseInt(1/i))}else d=r.createElement("meta"),d.setAttribute("name","viewport"),d.setAttribute("content","width=device-width, initial-scale=1, user-scalable=no, minimal-ui"),a.firstElementChild.appendChild(d);e.addEventListener("resize",function(){
clearTimeout(o),o=setTimeout(t,300)},!1),e.addEventListener("pageshow",function(e){
e.persisted&&(clearTimeout(o),o=setTimeout(t,300))},!1),"complete"===r.readyState?r.body.style.fontSize=12*n+"px":r.addEventListener("DOMContentLoaded",function(){
r.body.style.fontSize=12*n+"px"},!1),t()}(window)}]);</script>
</head>
<body>
   	<div id="lottery" class="NotoSansHans-Regular">
   		<ul>
   			<li class="lottery-unit  lottery-unit-0">
   				<p><span class="RenaultLife-Bold">1000</span>元<br>现金</p>
   			</li>
   			<li class="lottery-unit alone lottery-unit-1">
   				<p>抱枕</p>
   			</li>
   			<li class="lottery-unit lottery-unit-2">
   				<p><span class="RenaultLife-Bold">100</span>元<br>京东卡</p>
   			</li>
   		</ul>
   		<ul>
   			<li class="lottery-unit alone lottery-unit-7">
   				<p>谢谢参与</p>
   			</li>
   			<li class="lottery-go alone">
   				<p>Go</p>
   			</li>
   			<li class="lottery-unit lottery-unit-3">
   				<p><span class="RenaultLife-Bold">1000</span>元<br>现金</p>
   			</li>
   		</ul>
   		<ul>
   			<li class="lottery-unit lottery-unit-6">
   				<p><span class="RenaultLife-Bold">100</span>元<br>京东卡</p>
   			</li>
   			<li class="lottery-unit alone lottery-unit-5">
   				<p>谢谢参与</p>
   			</li>
   			<li class="lottery-unit alone lottery-unit-4">
   				<p>抱枕</p>
   			</li>
   		</ul>
    </div>

</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var lottery={
    index:-1,    //当前转动到哪个位置，起点位置
    count:0,    //总共有多少个位置
    timer:0,    //setTimeout的ID，用clearTimeout清除
    speed:20,    //初始转动速度
    times:0,    //转动次数
    cycle:50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize:-1,    //中奖位置
    init:function(id){
        if ($("#"+id).find(".lottery-unit").length>0) {
            $lottery = $("#"+id);
            $units = $lottery.find(".lottery-unit");
            this.obj = $lottery;
            this.count = $units.length;
            $lottery.find(".lottery-unit-"+this.index).addClass("active");
        };
    },
    roll:function(){
        var index = this.index;
        var count = this.count;
        var lottery = this.obj;
        $(lottery).find(".lottery-unit-"+index).removeClass("active");
        index += 1;
        if (index>count-1) {
            index = 0;
        };
        $(lottery).find(".lottery-unit-"+index).addClass("active");
        this.index=index;
        return false;
    },
    stop:function(index){
        this.prize=index;
        return false;
    }
};

function roll(){
    lottery.times += 1;
    lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
    if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
        clearTimeout(lottery.timer);
        lottery.prize=-1;
        lottery.times=0;
        click=false;
    }else{
        if (lottery.times<lottery.cycle) {
            lottery.speed -= 10;
        }else if(lottery.times==lottery.cycle) {
            var index = Math.random()*(lottery.count)|0;
            //随机位置赋值，若是接口请求确定好位置 这块需要去掉
            lottery.prize = index;        
        }else{
            if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                lottery.speed += 110;
            }else{
                lottery.speed += 20;
            }
        }
        if (lottery.speed<40) {
            lottery.speed=40;
        };
        lottery.timer = setTimeout(roll,lottery.speed);//循环调用
    }
    return false;
}

var click=false;
$(function(){
	lottery.init('lottery');
    $("#lottery .lottery-go").click(function() {
    	 if (click) {//click控制一次抽奖过程中不重复点击
            return false;
        }else{
            lottery.speed=100;
            roll();    //转圈完成 click为false、可继续抽奖
            click=true; //设置click为true，转圈过程不响应click事件
            return false;
        }
    })
})
</script>

</html>

           var index = Math.random()*(lottery.count)|0;
            //随机位置赋值，若是接口请求确定好位置 这块需要去掉
            lottery.prize = index;

此处中奖位置被随机赋值，中奖位置需要由接口返回时如下：

function roll(){
    lottery.times += 1;
    lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
    if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
        //接口返回的处理 告知用户状态
    	var is_prize = $("#lottery").attr("is_prize");
        setTimeout(function(){
	        if(is_prize == 1){
	        	alert('中奖了')
	        }else{
	        	alert('未中奖')
	        }
        },1000)


        clearTimeout(lottery.timer);
        lottery.prize=-1;
        lottery.times=0;
        click=false;
    }else{
        if (lottery.times<lottery.cycle) {
            lottery.speed -= 10;
        }else if(lottery.times==lottery.cycle) {
            //var index = Math.random()*(lottery.count)|0;
            //随机位置赋值，若是接口请求确定好位置 这块需要去掉
            //lottery.prize = index;        
        }else{
            if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                lottery.speed += 110;
            }else{
                lottery.speed += 20;
            }
        }
        if (lottery.speed<40) {
            lottery.speed=40;
        };
        lottery.timer = setTimeout(roll,lottery.speed);//循环调用
    }
    return false;
} 



 $("#lottery .lottery-go").click(function() {
    	if(click){
    		return false
    	}else{
	        $.ajax({
	            type: 'GET',
	            url: url, 
	            success:function(res){
	            	res = JSON.parse(res)
	            	if(res.code == 200){
	                	// 5 7 谢谢参与     1 4 中奖抱枕
            			var is_prize = res.data.is_prize;
            			if(is_prize == 0){
            				var losing = [5,7];
                 			var losing_index=parseInt(losing.length*Math.random()) 
							lottery.prize = losing[losing_index]; 
            			}else if(is_prize == 1){
            				var win = [1,4];
            				var win_index=parseInt(win.length*Math.random()) 
                 			lottery.prize=win[win_index];
            			}

            			$("#lottery").attr('is_prize',is_prize);
        
	                    lottery.speed = 100; 
	                    roll();
	                    click = true;
	                    return false;

	            	}else{
	            		alert(res.message)
	            	}        
	            }
	        });
        }
    })