写在前面

之前在一次线下活动大屏上看到一个抽奖界面，当时围了不少人，有人就说会不会有后门啊，这种抽奖概率看似很高总是中不到，我心想这个程序要想动手脚很简单的，因为程序都是人写的，即便是随机数现在也不随机了，那么我就写一个demo分享给大家吧。

涉及知识

抽奖界面实现，简单滚动抽奖界面的实现，原生js实现动态抽奖，跑马灯抽奖实现，随机抽奖界面实现，web抽奖页面制作与实现完整过程。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

效果图

在这里插入图片描述

1、搭建抽奖页面

首先脑海中应该有一个画面构思，就是有几个区域，我主要是设置两个区域，一个是抽奖区域，还有一个就是结果展示区域，如下所示：
在这里插入图片描述

主要核心代码如下：

<p id='result'></p>

<div>
    <span class="aa">空调</span>
    <span>电饭煲</span>
    <span>洗碗机</span>
    <span>iphone14</span>
    <span>谢谢参与</span>
    <span>汽车</span>
    <span>自行车</span>
    <span>再抽一次</span>
    <span>开始</span>
</div>

下面就是样式的设置了，不然看着挺丑的。

2、设置抽奖样式

设置样式有三点，针对开始，奖品，初始位置做一个颜色的区分；
这里主要采用了div下的span标签，因此可以用css里面的:nth-of-type查找孩子节点

1）奖项区块颜色

统一对span设置颜色

div>span {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 20px;
    margin: 5px;
    background: rgb(22, 186, 236);
    color: white;
    text-align: center;
    line-height: 100px;

}

在这里插入图片描述

2）开始按钮背景色

开始按钮这是第9个span标签
设置样式如下：

div>span:nth-of-type(9) {
    cursor: pointer;
    background: rgb(255, 148, 61);
    position: relative;
    left: -110px;
    top: -110px;
}

在这里插入图片描述

3）启动初始块颜色

一般我们用左上角第一个作为初始块，当然这边我设置了class名为aa,其实设置这个有个目的就是为了后面抽奖时候针对路过的方块都可以添加这个样式。

div .aa {
   background: rgb(112, 146, 190);
}

整体样式如下：
在这里插入图片描述

3、编写抽奖功能

上面基本上也就把样式写好了，接下来就是如何让其跑起来，主要用原生的js来实现。
核心思想：设置一个定时轮询，设置一个随机次数和固定速度，这样的话就会形成一个动态效果，当然前面提到的造假完全可以在这里实现的。
具体代码如下：

var result = document.getElementById('result');
var spans = document.querySelectorAll("div>span");
function start() {
    spans.forEach(function (el, index) {
        if (index != 0) {
            el.classList.remove('aa'); // 清空上一次结果
        }
    })
    result.textContent = '';
    spans[8].style.cursor = "not-allowed";
    spans[8].onclick = null;
    let num = -1;      //奖品序号
    let times = parseInt(Math.random() * (30 - 18 + 1) + 18, 10);
    let time = 0;     //当前的旋转次数
    let speed = 100;  //转盘速度
    timer = setInterval(function () {
        num++;
        time++;
        if (num > 7) {
            num = 0;
            spans[0].classList.add('aa');
            spans[7].classList.remove('aa');
        } else if (num == 0) {
            spans[num].classList.add('aa');
            spans[7].classList.remove('aa');
        } else {
            spans[num].classList.add('aa');
            spans[num - 1].classList.remove('aa');
        }
        if (time > times) {
            spans[8].onclick = start;
            spans[8].style.cursor = "pointer";
            clearInterval(timer);
            result.textContent = '恭喜您,已经抽中了' + spans[num].textContent + '!!!';
        }
    }, speed)
}
spans[8].onclick = start;