jquery实现抽奖功能


Posted in jQuery onOctober 22, 2020

本文实例为大家分享了jquery实现抽奖功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 #lottery {
 width: 570px;
 height: 510px;
 margin: 0px auto;
 border: 4px solid #ba1809;
 }
 
 #lottery table {
 background-color: yellow;
 }
 
 #lottery table td {
 position: relative;
 width: 190px;
 height: 170px;
 text-align: center;
 color: #333;
 font-index: -999
 }
 
 #lottery table td img {
 display: block;
 width: 190px;
 height: 170px;
 }
 
 #lottery table td a {
 width: 190px;
 height: 170px;
 display: block;
 text-decoration: none;
 background: url(img/9.jpg) no-repeat top center;
 }
 
 #lottery table td a:hover {
 background-image: url(img/11.jpg);
 }
 
 #lottery table td.active .mask {
 display: block;
 }
 
 .mask {
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0;
 background-color: rgba(252, 211, 4, 0.5);
 display: none;
 }
 </style>
 
 </head>
 <body>
 
 <div id="lottery">
 <table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td class="lottery-unit lottery-unit-0">
  <img src="img/1.jpg">
  <div class="mask"></div>
  </td>
  <td class="lottery-unit lottery-unit-1">
  <img src="img/2.jpg">
  <div class="mask"></div>
  </td>
  <td class="lottery-unit lottery-unit-2">
  <img src="img/3.jpg">
  <div class="mask"></div>
  </td>
 </tr>
 <tr>
  <td class="lottery-unit lottery-unit-7">
  <img src="img/4.jpg">
  <div class="mask"></div>
  </td>
  <!-- 点击触发抽奖 -->
  <td><a href="#" rel="external nofollow" ></a></td>
  <td class="lottery-unit lottery-unit-3">
  <img src="img/5.jpg">
  <div class="mask"></div>
  </td>
 </tr>
 <tr>
  <td class="lottery-unit lottery-unit-6">
  <img src="img/6.jpg">
  <div class="mask"></div>
  </td>
  <td class="lottery-unit lottery-unit-5">
  <img src="img/7.jpg">
  <div class="mask"></div>
  </td>
  <td class="lottery-unit lottery-unit-4">
  <img src="img/8.jpg">
  <div class="mask"></div>
  </td>
 </tr>
 </table>
 </div>
 
 <script src="js/jquery.js"></script>
 <script type="text/javascript">
 var lot = $(".lottery-unit");
 var nowIndex = -1; //记录添加激活类的下标
 var btn = $("table").find("a")
 console.log(btn)
 var curIndex = null; //记录上一次坐标
 var round = 0; //记录移动几圈
 var n = 0; //记录移动了多少次
 var timer = null; //旋转计时器
 var priceIndex = (Math.random()*lot.length) | 0; //中奖的下标
 console.log(priceIndex)
 var isClick = true;
 function move(){
 n++;
 nowIndex++;
 if(n%8==0){
 round++;
 console.log("跑了"+round+"圈");
 if(round>=3){
  clearInterval(timer);
  timer = setInterval(move,50)
 }
 if(round > 8){
  clearInterval(timer);
  timer = setInterval(move,1000)
 }
 }
 // 第二种方式
 // if(n>=8 && n<12){
 // clearInterval(timer)
 // timer = setInterval(move,50)
 // }
 // if(n>=12){
 // clearInterval(timer)
 // timer = setInterval(move,50)
 // }
 
 lot.filter(".lottery-unit-"+nowIndex).addClass("active")
 // 当curIndex为0时,布尔值为false,所以要加curIndex==0
 if(curIndex || curIndex==0){
 lot.filter(".lottery-unit-"+curIndex).removeClass("active")
 }
 curIndex = nowIndex;
 
 // 如何实现中奖
 if(nowIndex == priceIndex && round > 8){
 
 clearInterval(timer);
 if(priceIndex==1){
  setTimeout(function(){
  alert("111111")
  },1000)
 }
 // 重置参数
 isClick = true;
 round = 0;
 nowIndex = -1;
 curIndex = null;
 priceIndex = (Math.random()*lot.length) | 0;
 console.log("中奖的下标",priceIndex)
 
 }
 if(nowIndex>=lot.length-1){
 nowIndex=-1;
 }
 }
 
 btn.click(function(){
 if(isClick){
 console.log("开始抽奖");
 isClick = false;
 timer = setInterval(move,100);
 }
 })
 </script>
 </body>
</html>

jquery实现抽奖功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 #jQuery
jQuery实现计算器功能
Oct 19 #jQuery
jQuery实现推拉门效果
Oct 19 #jQuery
jQuery实现图片切换效果
Oct 19 #jQuery
jQuery实现回到顶部效果
Oct 19 #jQuery
jQuery实现放大镜案例
Oct 19 #jQuery
jQuery插件实现图片轮播效果
Oct 19 #jQuery
You might like
删除数组元素实用的PHP数组函数
2008/08/18 PHP
php简单分页类实现方法
2015/02/26 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
使用Apache的rewrite
2021/03/09 Servers
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python模块常用用法实例详解
2019/10/17 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
高级销售求职信
2014/02/21 职场文书
教研活动总结
2014/04/28 职场文书
文明之星事迹材料
2014/05/09 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
党员自我评价范文2015
2015/03/03 职场文书
律政俏佳人观后感
2015/06/09 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技