JS实现方形抽奖效果


Posted in Javascript onAugust 27, 2018

本文实例为大家分享了JS实现抽奖效果展示的具体代码,供大家参考,具体内容如下

展示:

JS实现方形抽奖效果JS实现方形抽奖效果

HTML:

<div id="table"></div>
<div id="btn">
   <button onclick="start('p', 'active','newactive', 100)">顺序抽/停止</button>
  <button onclick="startRan('p', 'active','newactive', 100)">随机抽/停止</button>
</div>

CSS:

table {
 text-align: center;
 border-collapse: collapse;
}

table * {
 width: 60px;
 height: 60px;
}

#btn {
 box-sizing: border-box;
 width: 190px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

#btn * {
 flex-grow: 1;
 background-color: red;
 border: 1px solid #000;
 color: #fff;
 height: 30px;
 font-size: 10px;
}

.active {
 background-color: #ccc;
}

.newactive {
 background-color: #00ffff;
}

JavaScript:

// 定义一个奖池
 var jackpot = [
  ['奖品A1', '奖品A2', '奖品A3'],
  ['奖品B1', '奖品B2', '奖品B3'],
  ['奖品C1', '奖品C2', '奖品C3']
 ];

 /**
  * [table 创建表格]
  * @param {[Array]} arr  [奖品数组]
  * @param {[String]} selector [选择器]
  * @return {[String]} table [返回一个HTML标签]
  */
 function table(arr, selector) {

  var table = '<table border="1">';

  for (var i = 0; i < arr.length; i++) {

   table += '<tr>';

   for (var j = 0; j < arr[i].length; j++) {

    table += '<td class="' + selector + '">' + arr[i][j] + '</td>';

   }

   table += '</tr>';

  }

  table += '</table>';

  return table;

 }

 // 输出奖池
 document.getElementById('table').innerHTML = table(jackpot, 'p');

 var key = true; // start,startRan控制器
 var num = 3; // 抽奖次数
 // 抽过的还能抽  可定义抽奖次数-->次数限制      num需要定义
 //     不定义抽奖次数-->次数无限      num不需定义
 // 抽过的不能抽  可定义抽奖次数-->次数限制(次数不超过选择器长度) num需要定义
 //     不定义抽奖次数-->次数等于选择器长度    num需要定义

 /**
  * [start 开始抽奖]
  * @param {[String]} selector [选择器]
  * @param {[String]} addselector [给选中的添加样式]
  * @param {[String]} newaddselector [中奖奖品样式]
  * @param {[Number]} speed  [时间越小,速度越快]
  * @return {[type]}    [description]
  */
 function start(selector, addselector, newaddselector, speed) {

  if (key) {

   if (typeof(num) == 'undefined' || num != 0) {

    var count = 0;

    // 如果写成var timer会每次执行时重新定义一个timer,那么clearInterval(timer)只能清除后面定义的那个timer,前面定义的已经没有变量指向了 无法清除
    timer = setInterval(function() {

     if (count < $('.' + selector).length) {

      $('.' + selector).eq(count).addClass(addselector);

      $('.' + selector).eq(count).siblings().removeClass(addselector);

      $('.' + selector).eq(count).parent().siblings().children().removeClass(addselector);

      count++;

     } else {

      count = 0;

     }

    }, speed);

    if(typeof(num) != 'undefined'){

     num--;

    }

   } else{

    key = false;

    console.log("抽奖结束");

   }

  } else {

   clearInterval(timer);

   // 决定抽中的奖品的样式和抽中的奖品能否继续抽
   $('.' + addselector).addClass(newaddselector).removeClass(selector);

   // 奖品
   console.log($('.' + addselector).html());

  }

  key = !key;

 }

 /**
  * [start 开始抽奖]
  * @param {[String]} selector [选择器]
  * @param {[String]} addselector [给选中的添加样式]
  * @param {[String]} newaddselector [中奖奖品样式]
  * @param {[Number]} speed  [时间越小,速度越快]
  * @return {[type]}    [description]
  */
 function startRan(selector, addselector, newaddselector, speed) {

  if (key) {

   if (typeof(num) == 'undefined' || num != 0) {

    // 如果写成var timer会每次执行时重新定义一个timer,那么clearInterval(timer)只能清除后面定义的那个timer,前面定义的已经没有变量指向了 无法清除
    timer = setInterval(function() {

     var count = Math.floor(Math.random() * $('.' + selector).length);

     $('.' + selector).eq(count).addClass(addselector);

     $('.' + selector).eq(count).siblings().removeClass(addselector);

     $('.' + selector).eq(count).parent().siblings().children().removeClass(addselector);

    }, speed);

    if(typeof(num) != 'undefined'){

     num--;

    }

   } else {

    key = false;

    console.log("抽奖结束");

   }


  } else {

   clearInterval(timer);

   // 决定抽中的奖品的样式和抽中的奖品能否继续抽
   $('.' + addselector).addClass(newaddselector).removeClass(selector);

   // 奖品
   console.log($('.' + addselector).html());

  }

  key = !key;

}

GitHub:地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 #Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 #Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 #Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 #Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 #Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 #Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 #Javascript
You might like
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
php密码生成类实例
2014/09/24 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
javascript 特殊字符串
2009/02/25 Javascript
jQuery 使用个人心得
2009/02/26 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
Bootstrap插件全集
2016/07/18 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
Python异常处理例题整理
2019/07/07 Python
pandas数据处理进阶详解
2019/10/11 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
初中作文评语大全
2014/04/23 职场文书
干部考核评语
2014/04/29 职场文书
安全标兵事迹材料
2014/08/17 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
体育委员竞选稿
2015/11/21 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server
Python Matplotlib绘制动画的代码详解
2022/05/30 Python
js 实现验证码输入框示例详解
2022/09/23 Javascript