原生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 相关文章推荐
JavaScript 事件系统
Jul 22 Javascript
js实现同一页面多个运动效果的方法
Apr 10 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
原生javascript实现分页效果
Apr 21 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
微信小程序实现animation动画
Jan 26 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
AngularJS的$location使用方法详解
2017/10/19 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Python实现直播推流效果
2019/11/26 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
中学生思想品德评语
2014/12/31 职场文书