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 05 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 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
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
javascript如何实现create方法
2019/11/04 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
在Python中marshal对象序列化的相关知识
2015/07/01 Python
python3中int(整型)的使用教程
2017/03/23 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
python爬虫实现获取下一页代码
2020/03/13 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
搞笑车尾标语
2014/06/23 职场文书
给客户的检讨书
2014/12/21 职场文书
详解Nginx 工作原理
2021/03/31 Servers
python - asyncio异步编程
2021/04/06 Python
 Python 中 logging 模块使用详情
2022/03/03 Python