原生JS实现九宫格抽奖


Posted in Javascript onSeptember 13, 2020

本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下

上代码:

<div class="wrapper">
    <div>谢谢惠顾</div>
    <div>十万元现金</div>
    <div>谢谢惠顾</div>
    <div>iphone11</div>
    <div>抽奖</div>
    <div>美的冰箱</div>
    <div>谢谢惠顾</div>
    <div>50元红包</div>
    <div>谢谢惠顾</div>
  </div>
<div class="result"></div>

CSS样式代码:

<style>
    .wrapper {
      width: 300px;
      height: 300px;
      display: flex;
      flex-flow: row wrap;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      border: 1px solid red;
    }
    
    .wrapper div {
      flex: none;
      width: 100px;
      height: 100px;
      box-sizing: border-box;
      border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .active {
      background-color: red;
    }
    
    .wrapper div:nth-child(5) {
      cursor: pointer;
    }
    
    .result {
      height: 100px;
      display: inline-block;
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
      line-height: 100px;
      font-size: 40px;
      font-weight: 700;
      color: #ff4400;
    }
</style>

JS代码:

<script>
    var t, m, num, time, index, target, current;
    //以索引值为0,1,2,5,8,7,6,3的div元素为循环目标,
    //因为以num总数递减的方式进行循环,故将数组倒序定义
    var arr = [3, 6, 7, 8, 5, 2, 1, 0];
    var div = document.querySelectorAll('.wrapper div');
    var result = document.querySelector('.result');
    div[4].onclick = function() {
      clearInterval(time);
      div[4].innerHTML = '抽奖中...';
      result.innerHTML = '';
      //中奖目标设为0到7的随机整数
      target = Math.floor(Math.random() * 8);
      //起始位置设为随机,且以num为总的循环数
      num = Math.floor(Math.random() * 8) + 40;
      //将总循环数的2/3保存,方便调整速率峰值出现的时间
      //若m为总循环的1/2,则速度峰值会在总时长的中间出现
      m = Math.floor(num * 2 / 3);
      //此处if语句可限制中奖,从第一个开始外圈顺时针分别对应7,6,5,4,3,2,1,0
      //如设置target == 6 即限制中十万元现金,以下代码为100%不中奖
      if (target == 6|| target == 4 || target == 2 || target == 0) { 
         target++;
       }
      speed();

      function speed() {
        //将循环目标div的索引值转换为循环总数的表达式
        index = arr[num % 8];
        //给当前循环元素添加样式,并移除之前的样式
        if (current) {
          current.remove('active');
        }
        div[index].classList.add('active');
        current = div[index].classList;
        //速度函数,可调试速率
        t = Math.floor(Math.pow((num - m), 2) + 250);
        //一次性定时器,嵌套递归循环控制速度
        time = setTimeout(function() {
            speed()
          }, t)
        //判断中奖结果
        if (num == target) {
          clearTimeout(time);
          div[4].innerHTML = '抽奖';
          switch (target) {
            case 6:
              result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML + '大奖';
              break;
            case 4:
              result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML;
              break;
            case 2:
              result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML;
              break;
            case 0:
              result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML;
              break;
            default:
              result.innerHTML = div[arr[target % 8]].innerHTML;
          }
        }
        num--;
      }
    }


</script>

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

Javascript 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
简单了解vue.js数组的常用操作
Jun 17 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
jQuery实现带进度条的轮播图
Sep 13 #jQuery
js+canvas实现画板功能
Sep 13 #Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 #jQuery
jQuery实现简单全选框
Sep 13 #jQuery
jQuery+ajax实现用户登录验证
Sep 13 #jQuery
js+audio实现音乐播放器
Sep 13 #Javascript
js+canvas实现刮刮奖功能
Sep 13 #Javascript
You might like
zend framework多模块多布局配置
2011/02/26 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
python网络编程之文件下载实例分析
2015/05/20 Python
Python聊天室实例程序分享
2016/01/05 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
单链表反转python实现代码示例
2018/02/08 Python
详解Python:面向对象编程
2019/04/10 Python
python中的协程深入理解
2019/06/10 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
生物技术专业研究生自荐信
2013/09/22 职场文书
保送生自荐信范文
2013/10/06 职场文书
写自荐信要注意什么
2013/12/26 职场文书
建筑节能汇报材料
2014/08/22 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
小学生毕业评语
2014/12/26 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
实习单位意见
2015/06/04 职场文书
金榜题名主持词
2015/07/02 职场文书
python中print格式化输出的问题
2021/04/16 Python