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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 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使用sql数据库 获取字段问题介绍
2013/08/12 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
python迭代器与生成器详解
2016/03/10 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
国贸专业的职业规划范文
2014/01/23 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
高中军训感言200字
2014/02/23 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
关于幸福的感言
2015/08/03 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
什么是SOLID
2022/03/24 Javascript