原生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 相关文章推荐
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
JavaScript多线程详解
Aug 12 Javascript
JavaScript中的Function函数
Aug 27 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
微信小程序之数据绑定原理解析
Aug 14 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
ECMAScript6--解构
2017/03/30 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python 的内置字符串方法小结
2016/03/15 Python
Python3 log10()函数简单用法
2019/02/19 Python
Python OpenCV实现视频分帧
2019/06/01 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
《雾凇》教学反思
2014/02/17 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书