九宫格大转盘抽奖

最新推荐文章于 2024-07-10 17:15:46 发布
最新推荐文章于 2024-07-10 17:15:46 发布
阅读量1.4k 收藏 9
点赞数 1
分类专栏： js 文章标签： 大转盘 九宫格大转盘 抽奖
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky_Zeng/article/details/100522664
版权

页面效果如下：

<!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)
	            	}        
	            }
	        });
        }
    })

 

zzz-ing
关注
专栏目录
jquery实现九宫格大转盘抽奖
10-23
在当前网络环境中，九宫格大转盘抽奖是一种流行的网页特效，用于增强用户体验和提升互动性。使用jQuery可以方便地实现这一效果，它允许开发者使用JavaScript来简化HTML文档遍历、事件处理、动画以及Ajax交互等操作。...
jquery——九宫格大转盘抽奖实例
10-20
本篇文章主要介绍了jquery——九宫格大转盘抽奖实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue -- 九宫格抽奖
weixin_34232363的博客
11-28 162
html： <div class="line_item" :class="index == 1 ? 'active' : 'white_item'"> <div>有礼</div> </div> <div class="line_item" :class="index == 2 ? 'active' : 'white_item'"&g...
用HTML，CSS，JavaScript写一个简单的九宫格抽奖系统
最新发布
weixin_68320295的博客
07-10 427
总结：定义两个计时器，分别开始，停止，document.getElementsByTagName接受的数组内容。遍历数组，每次遍历过后添加颜色，最后停止，将timer重新设置为10，反复循环。
九宫格转盘
weixin_42913264的博客
08-23 206
九宫格转盘
vue-九宫格抽奖
weixin_50367873的博客
09-19 529
vue九宫格抽奖系统
错误：'(QMessageBox::Icon)1u' cannot be used as a function
Suger Mike的博客
06-15 2284
程序代码如下： void MainWindow::on_commandLinkButton_clicked(){ if(this->currentImage == 4)   this->currentImage = 0;   else   this->currentImage ++;//更新当前图片   QString fileName
jQuery九宫格大转盘抽奖，可直接运行使用
05-09
jQuery九宫格大转盘抽奖是一种常见的互动式网页元素，常用于在线活动、促销或游戏，为用户提供一种吸引人的参与方式。这个项目提供了一个可以直接运行的解决方案，无需复杂的编程即可在网页上实现这一功能。 首先，...
jquery九宫格大转盘抽奖代码.zip
07-04
这款"jquery九宫格大转盘抽奖代码.zip"提供的就是一个利用jQuery实现的九宫格大转盘抽奖程序，适用于各种互动式抽奖活动，如线上促销或游戏。以下是对这个代码实现的详细解析： 首先，`jiaoben201418`可能代表该...
vue实现九宫格抽奖
m0_58565372的博客
08-22 3041
以上代码是我实现功能的代码，仔细研究一下，就可以看懂，希望对你们有所帮助！最近写了一个九宫格的抽奖，然后现在总结一下。
基于VUE实现的九宫格抽奖功能
12-29
先给大家展示下效果图： HTML代码： <title-bar :title=title></title-bar> 我的积分: 1000
Android打造流畅九宫格抽奖活动效果
09-01
抽奖活动有很多种形式，转盘抽奖，九宫格抽奖，刮刮卡抽奖，这篇文章主要为大家详细介绍了如何打造流畅九宫格抽奖活动效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue九宫格抽奖功能
Lval的博客
04-04 2661
vue九宫格抽奖 页面结构 1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="gift-box"> <ul> <li :class="[index==0?'active':'']">一等奖</li> <li :class="[index==1?'active':'']"&...
vue实现九宫格抽奖游戏
Candy_mi的博客
09-25 1712
效果图如下 页面代码如下 由于原点以及图片的位置都是动态的渲染进去的,这部分代码也不细说了主要是要计算好每个图片以及原点的偏移位置,找到规律 <template> <div class="Sudoku" v-wechat-title="$route.meta.title"> <div class="container-out"> ...
Vue 九宫格抽奖实现
codingLeader的博客
06-24 2206
Vue实现九宫格抽奖
vue3九宫格抽奖
huai42717的博客
09-07 538
vue九宫格抽奖
jQuery实现九宫格大转盘抽奖实例与CSS样式
本篇文章主要介绍了如何使用jQuery实现一个九宫格大转盘抽奖功能的实例。首先，我们注意到这个项目需要用到图片资源，包括但不限于奖品展示图片（如"lottery1.jpg"和"lottery2.jpg")以及一个半透明的遮罩层图片(mask...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值