『 JS真好玩』关于我用原生 JS 实现一个有趣的抽奖程序😁

前言

很久都没有用原生 JS 写过东西了，目前在实际开发中，基本都是用到现成的框架。刚好最近在小破站又学到了一个新的效果，同时也为了不遗忘原生 JS 相关的操作，今天我们就一起来使用原生 JS 开发一个抽奖的小程序。老规矩还是先看一下最终的成品吧，如下：

这个抽奖的程序很简单，刚打开的时候会自动旋转进行抽奖，当我们按下键盘的空格键时就会自动抽出当前的中奖人员。下面就让我们一起来看一下这个程序是如何实现的吧！

圆盘

首先我们需要先实现一下这个圆盘，这里只使用了简单的 html 和 css，让我们一起来看一下相关的代码，如下：

<div class="list"></div>

html 的内容很简单，只有一个 div 标签。我们再一起来看一下相关的 css 代码，如下：

*{
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    overflow: hidden;
}
.list {
    width: 400px;
    height: 400px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

上述的 css 就实现了一个圆，接下来我们需要设置一下在圆中右侧的中奖红三角，也是用 css 来实现的。那么你知道如何用纯 css 实现一个三角吗？让我们一起来看一下代码：

.list::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent red;
    right: 0;
}

在 css 中，我们可以通过 border 来创建一个三角形，只需要给对于的元素设置它的 width 和 height 属性为 0，然后设置对应的 border 属性，如果你希望设置一个向右的三角形，那么你可以通过设置 border-color 来实现。border-color 可以设置四个值，这四个值分别对应的就是边框的上右下左，我们只需设置上右下三个边的颜色为透明的，给左边的边设置一个颜色，就能实现向右的三角行。同理，如果改变其中某个边的颜色，就能实现朝向其它方向的三角形，大家可以尝试一下。

实现了指向中奖人员的名单，我们接下来就实现一下圆圈周围的人名样式，相关代码如下：

.list::before {
    content: attr(data);
    position: absolute;
    color: #1e90ff;
    font-size: 64px;
}
.list span {
    color: #fff;
    position: absolute;
    width: calc(100% + 120px);
    height: 20px;
    text-align: right;
    transition: 0.01s linear;
    user-select: none;
}

我们给 list 的 before 伪类添加了一个 attr(data) 值，这是为了后续在圆的中心显示当前指向中奖的人的名字，这个属性需要配合 JS 中的 setAttributes 方法一起使用，后续遇到再说这里。

静态的圆已经画好了，接下来我们就需要用到原生 JS 来实现人名的动态生成和抽奖了。

抽奖

因为我们这里是用原生 JS 来实现这个效果，因此我们所有的操作方法都是原生的方法。首先我们需要获取到 list 这个对象，我们可以通过 document.getElementsByClassName() 或 document.querySelector() 来获取元素，这里我们用 document.querySelector()，因为它选取到的元素只是一个，如果用 document.getElementsByClassName()，我们还需要选择第一个元素。这两个 API 的区别，有想了解的童鞋可以到 MDN 官网去进行查看。

选择了 list 元素后，我们就需要动态的插入一些 span 标签了，这些 span 标签就是我们在圆周围展示的人名，而人名我们也是随机生成的。下面我们一起来看一下初始的代码，这里使用的也是面向对象的方式，代码如下：

class Lottery {
    constructor() {
        this.list = document.querySelector('.list');
        this.randomSurnam = ["赵", "钱", "孙", "李", "周", "吴", "郑", "王", "冯", "陈", "褚", "卫", "蒋", "沈", "韩", "杨"];
        this.randomName = ["泽", "桐", "梓", "一", "宁", "梅", "生", "平", "明", "涵", "韵", "宸", "坤", "华", "星", "家"];
        this.names = [];
        this.run = true;
        this.deg = 0;
        this.slow = 0;
    }
}

在 Lottery 类的构造函数中，我们定义了初始的属性，其中定义了一个随机的姓的数组和随机的名字的数字，我们通过这两个数字来动态的生成随机名字，接下来有一个初始化的方法，用于生成随机名字，代码如下：

class Lottery {
    constructor() {
        //...other code
        
        this.init();
    }
    
    init() {
        for (let i = 0; i < 40; i++) {
            this.names.push(
                this.randomSurnam[Math.random() * this.randomSurnam.length | 0] +
                this.randomName[Math.random() * this.randomName.length | 0] +
                this.randomName[Math.random() * this.randomName.length | 0]
            )
        }

        for (let key in this.names) {
            let span = document.createElement('span');
            span.innerText = this.names[key];
            this.list.appendChild(span);
        }
    }
}

初始化的数据准备好了，在上述的代码中，我们通过 document.createElement() 这个原生的 API 创建了一个 span 标签，然后通过 appendChild() 方法将 span 标签插入到对应的元素中。这两个 DOM 的操作方法是我们最初学习 JS 时最早接触到的方法。

接下来我们就需要通过 JS 将每一个 span 标签的位置固定在圆的周围了，让我们一起来看相关的代码，如下：

class Lottery {
    //...other code
    
    draw() {
        const spans = this.list.children;
        for (let i = 0; i < spans.length; i++) {
            let span = spans[i];
            span.style.transform = `rotate(${i / this.names.length * 360 + this.deg}deg)`;
            span.style.color = '#fff';
        }
        const now = ((360 - this.deg) / 360 * this.names.length | 0) % this.names.length;
        this.list.setAttribute('data', this.names[now]);
        spans[now].style.color = 'red';
        if (this.run) {
            this.slow = 1;
        } else {
            this.slow = this.slow * 0.995;
        }
        this.deg -= this.slow;
    }
}

在上述代码中，我们通过循环前面生成的所有 span 标签，并给每个 span 标签都添加上相关的样式，最后实现的如下的静态画面：

到这里静态的圆已经通过 JS 动态绘制出来了，但是它还不会动，接下来我们就让它动起来。其实要让整个抽奖程序动起来也很简单，只需要添加一个定时器即可，代码如下：

class Lottery {
    //...other code

    animate() {
        setInterval(() => this.draw(), 10);
    }
}

我们只需要在 init 方法中调用 animate 即可。

到这里，还没完，剩下最后一步，就是何时让这个抽奖程序停下来呢？这里我给 document 添加了一个键盘抬起的事件，通过 addEventListener() 给 document 绑定了一个 keyup 事件，然后监听键盘的 code 是否为空格键，如果是空格键就停止，下面一起来看最后的代码：

class Lottery {
    //...other code

    event() {
        document.addEventListener('keyup',  (e) => {
            if (e.code === 'Space') {
                    this.run = !this.run;
            }
        });
    }
}

event 方法也需要在 init 方法中进行调用，这样当数据初始化好的时候就准备好了需要的内容。

最终的实现效果可以在这里进行查看：

总结

我们仅仅只使用了原生 JS 的几个 API ，就实现了这个抽奖效果。在实际的开发中，虽然我们已经很少用到这些原生的 API 了，但是我们还是需要知道相关的知识点，这样不仅对于我们的开发有帮助，对我们学习新的知识也会有帮助。让我们一起加油吧！

最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家

往期回顾

『 实战』从0到1，带你开发开发一款令人惊叹的时钟特效