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表单验证(简单)
May 23 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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
第六节--访问属性和方法
2006/11/16 PHP
php写的简易聊天室代码
2011/06/04 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
git进行版本控制心得详谈
2017/12/10 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
python super函数使用方法详解
2020/02/14 Python
python logging模块的使用
2020/09/07 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
程序员跳槽必看面试题总结
2013/06/28 面试题
机械电子工程专业推荐信范文
2013/11/20 职场文书
小学教师国培感言
2014/02/08 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
Python基础详解之描述符
2021/04/28 Python