JS实现点名功能

最新推荐文章于 2022-08-24 17:38:18 发布

无赖H4

最新推荐文章于 2022-08-24 17:38:18 发布

阅读量2.5k

点赞数 6

分类专栏： Web 文章标签： java js javascript

本文链接：https://blog.csdn.net/weixin_52142731/article/details/117431664

版权

Web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文通过一个简单的JavaScript实例，展示了如何实现网页点名功能，包括随机选取幸运儿、更新安全区（限制5个名字）以及清空安全榜的逻辑。涉及的主要数组操作有随机选择、splice、push、shift等，对于理解JS操作DOM和数组处理有很好的帮助。

摘要由CSDN通过智能技术生成

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

描述

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

实现

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

<!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个名字。
当按下清空安全榜的时候，会将安全榜的名字清空，添加回点名内容中。

<script>
        var 同学名单 = [
            "A", "B", "C", "D", "E", "F",
            "G", "H", "I", "J", "K", "L",
            "M", "N", "O", "P", "Q", "R",
            "S", "T", "U", "V", "W", "X",
			"Y", "Z"];
        var 已经被点过的同学名单 = [];
        var btn1 = document.querySelector("#btn1");
        btn1.onclick = f;
        function f() {
            var i = Math.floor(Math.random() * 同学名单.length);
            var x = 同学名单.splice(i, 1);
            已经被点过的同学名单.push(x);
            if (已经被点过的同学名单.length > 5) {
                var y = 已经被点过的同学名单.shift();
                同学名单.push(y);
            }
            var na = document.querySelector("#span");
            na.innerHTML = "<h2>" + x + "</h2>";
            var text = "";
            已经被点过的同学名单.forEach(element => {
                text = text + "<li>" + element + "</li>";
            });
            var ol = document.querySelector("#ol");
            ol.innerHTML = text;
        }

        var btn2 = document.querySelector("#btn2");
        btn2.onclick = m;
        function m() {
            var a = 已经被点过的同学名单.length;
            while (a > 0) {
                var r = 已经被点过的同学名单.shift();
                同学名单.push(r);
                a--;
            }
            var text = "";
            已经被点过的同学名单.forEach(element => {
                text = text + "<li>" + element + "</li>";
            });
            var ol = document.querySelector("#ol");
            ol.innerHTML = text;
        }
       
    </script>

展示：
练习连续点名5次后：在这里插入图片描述
第六次：将最开始的N删除，重新插入新的J；

点击清空安全榜：清空安全榜

对数组操作

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

JS官方文档：

点击跳转文档