九宫格抽奖

wade

发布于 2020-04-24 10:07:02

1.7K0

发布于 2020-04-24 10:07:02

文章被收录于专栏：coding个人笔记

九宫格抽奖，用到的不多，先看效果：

因为变成gif的原因，看起来会有跳过一些，实际是不会的。

说说思路，首先是布局，布局有两种方式：

这一种要用样式控制好，然后按顺序，而效果图的布局是这样的：

这种布局就要用js去修改一下。

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格</title>
    <style>
        .wrap {
            width: 600px;
            height: 600px;
            margin: 0 auto;
        }
        .main {
            width: 600px;
            height: 600px;
        }
        .num {
            width: 200px;
            height: 200px;
            float: left;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            box-sizing: border-box;
            border: solid 1px red;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="main">
        <div class="num">1</div>
        <div class="num">2</div>
        <div class="num">3</div>
        <div class="num">4</div>
        <div class="num" id="start">抽奖</div>
        <div class="num">5</div>
        <div class="num">6</div>
        <div class="num">7</div>
        <div class="num">8</div>
    </div>
</div>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
    var divNum = document.getElementsByClassName('num');
    var startBtn = document.getElementById("start");
//停止位置，因为先++，所以停止位置是加1
    var stopPosition = 8;
    var divList = [];
    var arr = [0, 1, 2, 5, 8, 7, 6, 3];
    for (let i = 0; i < divNum.length; i++) {
        divList.push(divNum[arr[i]]);
    };
    //样式改变
    function animation(index) {
     divList[index].style.background = 'red';
     //选中当前，上一个初始化
     if(index == 0){
      divList[7].style.background = '#fff';
     }else{
      divList[index - 1].style.background = '#fff';
     };
    }
    startBtn.onclick = function () {
     startBtn.innerText = "抽奖中...";
     var roundNum = 0;//转了多少个之后停止，可以看成除以8之后的圈
     var currentIndex = 0;//当前选中
     speedFun(500);
      function speedFun(speed) {
       //当转动数量没有达到50个一直加速直到100，当数量到达减速
       if(roundNum != 50){
        //速度从500到慢，一直到100最快
        if(speed != 100){
         speed -= 50;
        };
        roundNum ++;
       }else{
        //速度从快到慢，直到500
        if(speed != 500){
         speed += 50;
        }else{
         //速度达到500，如果设置选中位置跟当前选中相同就停止
         if(currentIndex == stopPosition){
          stopLuck();
          return
         }
        }
       };
       //数组只有0-7，第八个的时候置0
       currentIndex = currentIndex > 7 ? 0 : currentIndex;
       animation(currentIndex);
       currentIndex ++;
       //用定时器控制速度，另一种思路也可以用计时器
       setTimeout(function () {
        speedFun(speed);
       }, speed)
      }
    }
    //停止之后要中奖还是不中奖函数
    function stopLuck() {
     startBtn.innerText = "抽奖";
    }
</script>
</body>
</html>

这是很简单的一个demo，看看代码估计就会了，但是希望可以改成自己的代码。

（完）

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-10-22，如有侵权请联系 cloudcommunity@tencent.com 删除

gif