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一点特殊用法
May 28 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
清除输入框内的空格
Dec 21 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
JavaScript经典案例之简易计算器
Aug 24 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微信公众号开发模式详解
2016/11/28 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
判断对象是否Window的实现代码
2012/01/10 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
移动端效果之IndexList详解
2017/10/20 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
js前端面试之同步与异步问题详解
2019/04/03 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python中的heapq模块源码详析
2019/01/08 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
优秀团员个人事迹材料
2014/01/29 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
档案管理员岗位职责
2015/02/12 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书