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实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jquery实现抽奖功能
Oct 22 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
小程序实现留言板
2018/11/02 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python和Sublime整合过程图示
2019/12/25 Python
python实现ip地址的包含关系判断
2020/02/07 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
Django跨域请求原理及实现代码
2020/11/14 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
学习十八大精神心得体会
2013/12/31 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android