原生js实现九宫格抽奖
预览效果
完整代码
留意注释文字的解释。记得更换图片。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 实现九宫格抽奖</title>
<style>body{background-color: #2c9afc;}#container {width: 330px;height: 340px;margin: 10% auto;border: 7px solid #99d4ff;border-radius: 10px;padding: 2%;}#list {width: 330px;height: 340px;list-style: none;margin: 0;padding: 0;}#list li,#list span {width: 100px;height: 100px;float: left;text-align: center;line-height: 100px;position: relative;background-color: #384f9a;margin: 1.4%;border-radius: 5px;}#list li img{display: block;width: 100%;height: 100%;}#list li .mask{width: 100%;height: 100%;position: absolute;left:0;top:0;background: url(images/mask.png) no-repeat;background-size: cover;display: none;}#list span:hover {cursor: pointer;color: orange;font-size: 18px;}#list .active .mask{display: block;}#message {line-height: 32px;color: #9a9a9a;text-align: center;position:absolute;left: 50%;top: 50px;width: 300px;height: 50px;margin-left: -150px;display: none;background: #000;color: #fff;}
</style>
</head>
<body> <h3 style="text-align:center;margin-top: 10%;color:white">JavaScript 实现九宫格抽奖</h3><div id="container"><ul id="list"><!-- img标签放奖品图片 --><!-- mask类为抽奖滚动起来的标记 --><li><img src="data:images/1.png"/><div class="mask"></div></li><li><img src="data:images/2.png"/><div class="mask"></div></li><li><img src="data:images/3.png"/><div class="mask"></div></li><li><img src="data:images/4.png"/><div class="mask"></div></li><span id="startbutton" onclick="startlottery()" style="background-color:#ff3a59;color:white;font-size: 20px;">开始抽奖</span><li><img src="data:images/5.png"/><div class="mask"></div></li><li><img src="data:images/6.png"/><div class="mask"></div></li><li><img src="data:images/7.png"/><div class="mask"></div></li><li><img src="data:images/8.png"/><div class="mask"></div></li></ul><div id="message"></div><!-- 获奖信息展示 --></div>
</body><script type="text/javascript">var container = document.getElementById('container'),li = container.getElementsByTagName('li'),span = document.getElementById('startbutton'),message = document.getElementById('message'),timer = null;bReady = true;//定义一个抽奖开关var prize = [0,1,2,4,7,6,5,3];//奖品li标签滚动的顺序var num = 0;//num用来存放得到的随机函数,也就是抽中的奖品//开始抽奖function startlottery(){if(bReady) {//当抽奖开关为true的时候,可点击抽奖message.style.display="none";//将获奖信息div隐藏(以防止上次抽奖信息还显示)span.style.background="#ada7a8";bReady = false;//抽奖开关设为false 处于抽奖中 即不能点击抽奖num = getrandomnum(1,9)//得到一个随机数(即奖品)// console.log(num)startinit(num);//执行抽奖初始化}}//抽中的奖品 返回1-9的整数,包含1,不包含9function getrandomnum(n, m) {return parseInt((m - n) * Math.random() + n);}//抽奖初始化function startinit(num) {var i = 0; //定义一个i 用来计算抽奖跑动的总次数var t =200; //抽奖跑动的速度 初始为200毫秒var rounds = 5; //抽奖转动的圈数var rNum = rounds*8; //标记跑动的次数(这是一个条件判断分界线)timer = setTimeout(startscroll, t);//每t毫秒执行startscroll函数//抽奖滚动的函数function startscroll() {//每次滚动抽奖将所有li的class都设为空for(var j = 0; j < li.length; j++) {li[j].className = '';}var prizenum = prize[i%li.length]; //通过i余8得到此刻在prize数组中的数字,该数字就是mask标记出现的位置li[prizenum].className = "active";i++;if(i<rNum-8){ //当i小于转(rNum-8次)的数量,t不变还是200毫秒timer = setTimeout(startscroll, t);//继续执行抽奖滚动}else if(i>= rNum-8 && i< rNum+num){//t时间变长,此时计时器运行速度降低,同时标签刷新速度也降低t+=(i-rNum+8)*5;timer = setTimeout(startscroll, t);//继续执行抽奖滚动}if( i >= rNum+num){//当i大于转rNum加随机数字num次计时器结束,出现提示框提示中奖信息if (num==1) {message.innerHTML="恭喜你中了耳机";}else if(num==2){message.innerHTML="恭喜你中了iPad";}else if(num==3){message.innerHTML="感谢参与";}else if(num==4){message.innerHTML="恭喜你中了洋娃娃";}else if(num==5){message.innerHTML="恭喜你中了红色鞋子";}else if(num==6){message.innerHTML="恭喜你中了白色手机";}else if(num==7){message.innerHTML="恭喜你中了黑色手机";}else if(num==8){message.innerHTML="恭喜你中了蓝色鞋子";}var timer2 = null;timer2 = setTimeout(function(){message.style.display="block";//奖品展示的信息为显示状态span.style.background="#ff3a59";clearTimeout(timer2);},1000);bReady = true;//当计时器结束后让span标签变为抽奖状态clearTimeout(timer);}}}</script>
</html>
代码分析
- prize
var prize = [0,1,2,4,7,6,5,3];//奖品li标签滚动的顺序
数组prize中的数字就是li标签对应的索引值,由于是九宫格抽奖,因此抽奖滚动的顺序并不是按li标签的索引顺序,以下是li标签实际滚动的顺序图分析:
- getrandomnum(1,9)
//抽中的奖品 返回1-9的整数,包含1,不包含9
function getrandomnum(n, m) {return parseInt((m - n) * Math.random() + n);
}
因为只有8个奖品,所以得到的随机整数不包含9
- 变量 i、rounds、rNum
//抽中的奖品 返回1-9的整数,包含1,不包含9var i = 0; //定义一个i 用来计算抽奖跑动的总次数var rounds = 5; //抽奖转动的圈数var rNum = rounds*8; //标记跑动的次数(这是一个条件判断分界线)
i 是用来计算li标签滚动的次数,滚动一次加1;
rounds 及 rNum 用来让滚动抽奖变慢及停止的判断条件;
- prizenum
//抽中的奖品 返回1-9的整数,包含1,不包含9var prizenum = prize[i%li.length]; //通过i余8得到此刻在prize数组中的数字,该数字就是mask标记出现的位置li[prizenum].className = "active";
i%li.length 为i除以li标签长度得到的余数(始终为0-7范围的整数),放进prize数组中,得到的prizenum数字就是当前滚动到的li标签索引值
本文来源于微信GitWeb的文章
原生js实现九宫格抽奖相关推荐
- java 9宫格抽奖_原生JS实现九宫格抽奖
本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下 上代码: 谢谢惠顾 十万元现金 谢谢惠顾 iphone11 抽奖 美的冰箱 谢谢惠顾 50元红包 谢谢惠顾 CSS样式代码: ...
- 原生js 实现九宫格抽奖功能
1.先绘制一个九宫格轮盘 <div class="bodydom"><div class="block">鸿蒙紫气*1</div& ...
- html九宫格抽奖视频,原生JS实现九宫格抽奖效果
效果图: 代码如下: *{margin:0;padding:0;} #container{width:310px;height:310px;margin:30px auto;} #ul1{width: ...
- js实现九宫格抽奖功能
分享一下js的九宫格抽奖功能 首先是html部分: <div class="box"><div class="div2">短裙</ ...
- 九宫格抽奖源代码php,原生javascript实现九宫格抽奖效果代码
本篇文章主要介绍了原生javascript实现九宫格抽奖效果代码.具有很好的参考价值.下面跟着小编一起来看下吧 效果图: 代码如下: *{margin:0;padding:0;} #container ...
- 原生JS开箱随机抽奖代码
下载地址原生JS制作开箱随机抽奖小游戏,思路比较简单,十分实用!您可以随意定制抽奖奖品,点击开启按钮,箱子筛选随机产生中奖结果弹窗提示.ps:演示内容无任何含义. dd:
- 原生js实现轮盘抽奖,控制中奖概率(完整示例)
文章目录 1.实现旋转 2.控制得奖概率 3. 控制旋转动画落点 4.测试概率 完整代码 本想找一个现成的,结果发现网上只有能实现转了,但是效果并不是让人很满意,于是我就借鉴一个样式,重新改了js实现 ...
- JS复习 九宫格抽奖
结构 <body><div id="fa"><div class="option">1</div><div ...
- 原生js写简易抽奖系统
效果图 原理: 其实这里的原理就是通过按钮的状态是开始抽奖还是停止 如果i=ture 那就触发定时器 每50毫秒更换一次中奖的内容.如果i=false,那就清除定时器,显示最后的抽奖结果 下面我给大家 ...
最新文章
- 为什么说一知半解的人生最可怕?
- 拉格朗日差值法----算法学习
- 数字三角形:顺推法(二维数组)
- 用单片机测量流体流速的_影响超声波流量计(热量表)测量精度的主要因素
- 万向区块链与生态圈合作伙伴形成RISC-V国际区块链SIG
- boost升压斩波电路 分析
- Tkinter教程(每天半小时,3天彻底掌握Tkinter)day1
- Window 错误代码大全
- ir指令、立即数的作用_计算机系统概论-笔记
- python单位根检验看结果_时间序列的ADF检验(单位根检验)
- Android SDK使用迅雷下载方法
- python求协方差矩阵_python计算平面的法向-利用协方差矩阵求解特征值和特征向量...
- silvaco学习日记(四)
- 计算机应用课程思政的应用,计算机类课程思政改革——以“Office高级应用”课程为例...
- KVM虚拟化,云平台
- android小电脑,废旧笔记本电脑纯手工改装“安卓小电脑”,太赞了!
- 基于bim技术的应用软件有?哪些提高bim工作效率的revit插件
- 期货外接看穿式技术方面问答总结
- Jexus-5.6.3使用详解
- 专科生学习云计算的就业前景如何?