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 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
详解vue-router导航守卫
Jan 19 Javascript
es6数值的扩展方法
Mar 11 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 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
golang与PHP输出excel示例
2016/07/22 PHP
php实现简单加入购物车功能
2017/03/07 PHP
JavaScript 特殊字符
2007/04/05 Javascript
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python实现图片压缩代码实例
2019/08/12 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
小学班主任评语大全
2014/04/23 职场文书
大专生求职信
2014/06/29 职场文书
自主招生自荐信范文
2015/03/04 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
小学中队活动总结
2015/05/11 职场文书
客户答谢会致辞
2015/07/30 职场文书
Python 键盘事件详解
2021/11/11 Python
python中的getter与setter你了解吗
2022/03/24 Python