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中map函数的两种方式
Apr 07 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现朋友圈查看图片
Sep 11 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将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
Python中的字符串查找操作方法总结
2016/06/27 Python
python基础教程之五种数据类型详解
2017/01/12 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python和php学习哪个更有发展
2020/06/17 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
三孔导游词
2015/02/05 职场文书
毕业证明书
2015/06/19 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python