JS实现点名功能

爱被打了一巴掌 2022-10-17 00:56 132阅读 0赞

### JS实现点名功能 ###

*  描述
 *  实现
 *   *  对数组操作

主要是使用 JS修改/操作DOM树的能力

# 描述 #

利用JS实现点名功能，当在网页点下点击按钮的时候，随机点名，然后将点过名的同学插入到安全区（下次不会点到），但是安全区的名字最多只有5个，超过5个，则下次仍然有机会点到。

# 实现 #

我们首先准备HTML的页面，页面包含如下内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjE0MjczMQ_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>点名器</title>
    </head>
    
    <body>
        <h1>点名器</h1>
        <div>
            <h2>幸运儿</h2>
            <div id="name1">
                <button type="button" id="btn1">点名</button>
                <span id="span"></span>
            </div>
        </div>
    
        <div>
            <h2>已经点过的同学，安全榜</h2>
            <button type="button" id="btn2">清空安全榜</button>
            <ol id="ol"></ol>
        </div>  
    </body>
    </html>

*  当我们按下点名按钮的时候，会将一个名字展示在幸运儿后面，同时安全榜也会出现其名字，安全榜最多5个名字。
 *  当按下清空安全榜的时候，会将安全榜的名字清空，添加回点名内容中。

展示：  
练习连续点名5次后：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjE0MjczMQ_size_16_color_FFFFFF_t_70 1]  
第六次：将最开始的N删除，重新插入新的J；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjE0MjczMQ_size_16_color_FFFFFF_t_70 2]  
点击清空安全榜：清空安全榜![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjE0MjczMQ_size_16_color_FFFFFF_t_70 3][]

## 对数组操作 ##

我们会用到JS对数组的操作：  
要随机: \[0, 9) Math.floor(Math.random() \* 9)  
Math.random() 可以生成 0 - 1 的随机值  
尾插：同学名单.push(“元素”);  
头删：var x = 已经被点过的同学名单.shift();  
数组长度: 同学名单.length  
删除下标是 i 的元素出来: var x = 同学名单.splice(i, 1);

JS官方文档：

点击跳转 [文档][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjE0MjczMQ_size_16_color_FFFFFF_t_70]: /images/20221014/67edda2e0ec4419e9c119fd720edc2f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjE0MjczMQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/e390089993504a5fa3b75ecb545f0872.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjE0MjczMQ_size_16_color_FFFFFF_t_70 2]: /images/20221014/fb9aa508fb2e4c338089f129cd3bcf55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjE0MjczMQ_size_16_color_FFFFFF_t_70 3]: /images/20221014/059795a6ff3042329e63a6e082f1efd6.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript