原生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 数字转换研究总结
Dec 26 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
Element InputNumber 计数器的实现示例
Aug 03 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
JavaScript逻辑运算符相关总结
Sep 04 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
python入门基础之用户输入与模块初认识
2016/11/14 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python探索之Metaclass初步了解
2017/10/28 Python
python实现用户答题功能
2018/01/17 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
英国家用电器购物网站:Hughes
2018/02/23 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
JPA的优势都有哪些
2013/07/04 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
2015年教师节主持词
2015/07/03 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
Python anaconda安装库命令详解
2021/10/16 Python