利用js实现简单抽奖功能

其实这种抽奖的功能和选人是一样的。在点击开始按钮之后，标题上方的名字可以实现一个不停的变化，在点击停止之后抽出获奖的名字。在写之我们必须明确一点的是需要用到哪些方法；并且将基础的框架搭建出来；

下面是功能实现的视频展示：（如下）

抽奖

基本的样式，这里就不作修改了。下面是功能实现的思路：

1.在html中写出基本框架：

分别是一个可以实现名字变化的标签，这里我写的是h2，当然你可以写成任何标签，都是可以的；

两个带有点击事件的按钮，一个是开始，一个是停止。当我点击开始按钮时能够触发事件，实现标题名字的不断变化，当我点击停止按钮时则可以选出一个获奖的名字。

3个奖项的标签和3个用以存放我们上面点击停止之后得到的值的标签，这里我用了p标签，同上。

    <div id="game">
        <h2>获奖的游戏？</h2>
    </div>
    <div class="btn">
        <input type="button" value="开始" id="startBtn">
        <input type="button" value="停止" id="stopBtn" disabled>
    </div>
    <div class="week">
        <div class="winner">
            <h1>一等奖</h1>
            <p>1</p>
        </div>
        <div class="winner">
            <h1>二等奖</h1>
            <p>2</p>
        </div>
        <div class="winner">
            <h1>三等奖</h1>
            <p>3</p>
        </div>
    </div>

这里写了不同的选择器用来区分不同的区域，实现不同的功能。

2.下面是js部分的代码，我这里用的内嵌，所以是写在body里面的

    <script>
        let nameStr = `LOL,Apex,魔兽,原神,王者,古墓丽影,云顶之弈`;
        let arrLucky = ["一等奖", "二等奖", "三等奖"];
        let arrId = nameStr.split(","); // 转数组

        let p = document.querySelectorAll('p');
        let timer = null, index = -1;

        // 点击事件
        // 开始
        startBtn.onclick = function () {
            stopBtn.disabled = false;
            if (timer) {
                return;
            }
            timer = setInterval(function () {
                index = random(0, arrId.length - 1);
                let h2s = document.getElementsByTagName(`h2`)[0];
                h2s.innerText = arrId[index];

            }, 100);
        }
        let i = 2;
        // 结束
        stopBtn.onclick = function () {
            clearInterval(timer);
            timer = null;   // 重新赋值

            if (i >= 0) {
                p[i].innerText = arrId[index];
                i--;
            }
            if (i < 0) {
                stopBtn.disabled = true;
            }
        }


        // 随机数
        function random(min, max) {
            return parseInt(Math.random() * (max + 1 - min) + min);
        }

    </script>

这里使用了一个数组的方法 split（）；来将字符串转为数组，这里可以根据自身的事实际需求书写，直接写成数组的形式也是可以的。

因为我们这里设置了三个获奖的游戏，是用p标签来表示的，要想在js中使用到具体的某个标签，我们需要先获取到该标签，所以使用了方法 document.querySelectorAll(ele'); 来获取到p标签，注意，使用该方法是存在返回值的，所以这里我使用了一个变量p来接收，而返回的值是一个 Nodelist 对象。

然后是点击事件，通过计时器来设置名字变化的好处是你可以通过修改特定的值就可以简单实现修改名字变化的快慢。即setInterval(function () {...}, 100); 中的100。你可以通过修改此参数来实现效果。

当我们点击开始按钮时，将停止按钮的关闭状态设置成false，即stopBtn.disabled = false;即可在我们点击了开始按钮之后，使停止按钮处于可选中状态。当我们并没有点击开始按钮时，停止按钮是处于一个不可选中的状态的，即disabled。

计时器的使用方法在这里就不过赘述，由于作用域的原因，停止按钮和开始按钮都是处于一个互不影响的状态，在我们停止按钮中书写的代码是无法访问到开始按钮中的数据的，这个时候就要将自己可能用到的数据，作为全局变量赋值出去，这样停止按钮作用域中也可以使用啦。

停止按钮的功能是在我们点击了停止按钮之后要实现一个名字变化的停止，所以这里使用了clearInterval(timer);来实现，但由于我们书写的功能不单是只实现一次的抽奖，是要实现多次的抽奖，所以，这里又要将timer赋值成null，这样才能是开始按钮处于工作状态。i的值就是你要抽奖的次数。

好了以上就是本次分享的全部内容，如有疑问可以在下面的评论区给我留言