九宫格抽奖

最新推荐文章于 2022-09-25 22:58:24 发布

wade3po

最新推荐文章于 2022-09-25 22:58:24 发布

阅读量179

点赞数

本文链接：https://blog.csdn.net/wade3po/article/details/102686446

版权

看了一下自己之前的笔记，6月7月都只有两篇，九月只有四篇，这个月要过去了，一篇还没有。真是变成咸鱼了，天天混吃等死。想了想，大方向的没有学习，实在不想学就写一些简单demo。

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

因为变成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，看看代码估计就会了，但是希望可以改成自己的代码。