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插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery实现动态操作table行
Nov 23 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
如何去掉文章里的 html 语法
2006/10/09 PHP
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
python使用pymysql实现操作mysql
2016/09/13 Python
用Django写天气预报查询网站
2018/10/21 Python
Python实现word2Vec model过程解析
2019/12/16 Python
python IDLE添加行号显示教程
2020/04/25 Python
python自定义函数def的应用详解
2020/06/03 Python
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
四种会话跟踪技术
2015/05/20 面试题
岗位职责的含义
2013/11/17 职场文书
国际政治个人自荐信范文
2013/11/26 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
学校隐患排查制度
2015/08/05 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
python超详细实现完整学生成绩管理系统
2022/03/17 Python
优化Mysql查询的示例
2022/04/26 MySQL
Java异常体系非正常停止和分类
2022/06/14 Java/Android