教你如何利用js实现一个简单的点名器


今天在学习js的时候，突然想做一个点名器，大学java课老师的点名器曾让我胆战心惊，如果通过js来实现一个点名器该怎么做呢？

废话不多说，先来看看最终要实现的效果：
在这里插入图片描述
首先来分析HTML结构：
在这里插入图片描述
结构部分主要依靠四个div进行布局，红框为最外层容器，内部有三个子元素，其中 开始 和 点名 两个div是并排的。

HTML：

1
2
3
4
5
    <div id="outer">
        <div id="left">开始</div>
        <div id="right">点名</div>
        <div id="name">会是谁?</div>
    </div>

样式部分主要是针对HTML结构的布局，在这里我们需要对父元素（outer）设置相对定位，确保让其中三个子元素开启绝对定位后，是依靠父元素进行定位的：

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
        /* 清除一下默认样式*/
        *{
            padding: 0;
            margin: 0;
        }
        /* 设置父容器样式*/
        #outer{
            width: 500px;
            height: 400px;
            background-color: #161823;
            /* 设置父元素相对定位，为子元素定位提供基准*/
            position: relative;
            border-radius: 20px;
            margin:  100px auto;
            box-shadow: 5px 5px 10px #808080;
        }
        /* 父容器下的容器通用样式*/
        #outer div{
            position:absolute;
            height: 100px;
            width: 250px;
            line-height: 100px;
            font-size: 50px;
            color: #ffffff;
            text-align: center;
        }
        /* 分别对三个子元素进行定位调整*/
        #left{
            top: 100px;
            left: 0;
        }
        #right{
            top: 100px;
            right: 0;
        }
        #outer #name{
            bottom: 50px;
            width: 500px;
            color: #ffc64b;
        }

做到这里之后，点名器的结构样式已经完成了，接下来我们就要通过js来让我们的点名器产生交互。
在这里插入图片描述
在这里我们的需求是当鼠标点击开始后，开始文字变为停止，其次会是谁？会不断的更新名字，当再次点击停止，文字又会变为开始，而下方的名字就不会变了。而在姓名不断切换的过程中，需要使用到js中的定时器来实现。
其实在这里，我最开始并不知道如何做，一开始我是通过循环来遍历整个数组，但是这样遍历程序执行的有点快，根本看不到姓名切换的效果，于是我又想到，也许在写入姓名之前加一个等待，获取可以实现切换的效果，这样也可以观察出来，但是js中并没有像Python中的time.sleep()，于是我在查了百度后，找到了一个方法，那就是计时器。
JavaScript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        // 页面全部加载后，再执行js程序
        window.onload = function(){
            // 将姓名存入数组
            var nameArr = ['蜘蛛侠','黑豹','奇异博士','美国队长',
            '钢铁侠','绿巨人','雷神','蚁人','死侍','惊奇队长','幻视',
            '红绯女巫','猎鹰','黑寡妇','灭霸','王','黄蜂女'];
            var btn = document.getElementById('left');
            var nameList = document.getElementById('name');
            // 标志位
            var flag = true;
            btn.onclick = function(){
                if(flag){
                    // 修改文本
                    btn.style.color = 'red';
                    btn.innerHTML = '停止';
                    // 定时器
                    var timer = setInterval(function(){
                        // 随机产生索引
                        var i = Math.floor(Math.random() * nameArr.length);
                        // 通过索读取姓名，并将姓名写入HTML中
                        nameList.innerHTML = nameArr[i];
                        // 这一步的目的是当第二次点击时，让计时器停止，使得最后写入的姓名固定下来
                        // 因为在第一次点击时，计时器需要启动，而这个时候标志位flag已经变为false
                        // 所以第二次点击，标志位flag变为true，代表需要停止，这时候停止计时器
                        if(flag == true){
                            clearInterval(timer);
                        }
                    },50)
                }else{
                    // 再次点击恢复原状
                    btn.style.color = '#ffffff';
                    btn.innerHTML = '开始';
                }
                // 更改标志位状态值
                flag = !flag;
            }
        }

做到这里，我们的计时器就全部完成了，在点名器中，最重要的点是计时器 ，通过计时器来快速随机访问数组的索引读取姓名，关于计时器的使用方法，可以通过菜鸟教程学习：

JavaScript 计时事件

最后，还可以在这个例子上延伸一下：

如果需要一次性点多个人姓名，一次性将多个姓名写入空白区域。

最后如果您觉得对您有帮助的话，点个赞吧！