【随机点名系统】

最新推荐文章于 2024-06-26 16:14:11 发布

亿元亿元

最新推荐文章于 2024-06-26 16:14:11 发布

阅读量398

点赞数

文章标签： css css3 html javascript

本文链接：https://blog.youkuaiyun.com/fover7/article/details/128086149

版权

本文介绍如何使用JavaScript编写一个随机点名系统，结合HTML和CSS创建用户界面，实现点名过程的随机性和趣味性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随机点名：

用JavaScript写一个随机点名

html以及css样式部分：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: cornsilk;
        }

        #dv {
            width: 800px;
            margin: 20px auto;
            border: 4px solid darkviolet;
            text-align: center;
            padding: 20px 20px 40px;
        }

        h1 {
            border-bottom: 2px solid pink;
            font-weight: normal;
        }

        ul li {
            vertical-align: top;
            display: inline-block;
            width: 100px;
            height: 50px;
            border-radius: 35%;
            border: 3px dashed palevioletred;
            text-align: center;
            line-height: 50px;
            margin: 5px 5px;
        }

        li.change {
            background-color: greenyellow;
            font-size: 15px;
            font-weight: bolder;
        }

        #btu,
        #btu1 {
            width: 100px;
            height: 50px;
            font-size: 15px;
            border-radius: 10px;
            cursor: pointer;
            margin: 10px 50px 0 50px;
            background-color: pink;
            border: none;
        }

        #btu:hover,
        #btu1:hover {
            background-color: #f28fa1;
        }

        .ch {
            position: relative;
            width: 150px;
            height: 50px;
            line-height: 50px;
            /* border-radius: 10px; */
            margin: 30px auto;
            border-bottom: 2px solid pink;
        }

        .luc {
            font-size: 20px;
            font-weight: bold;
            margin: 10px auto;
            text-align: center;
            color: green;
        }

        .name {
            font-size: 40px;
            font-family: '华文行楷';
        }
    </style>
</head>

<body>
    <div id="dv">
        <h1>19级文理实验班</h1>
        <button type="button" id="btu">开始点名</button>
        <button type="button" id="btu1">停止</button>
        <div class="luc">你将会是下一个幸运儿吗？请看大屏幕</div>
        <div class="ch">
            <span class="name">? ? ?</span>
        </div>
        <ul>
            <li class="change">刘禅</li>
            <li>李白</li>
            <li>张飞</li>
            <li>曹操</li>
            <li>关羽</li>
            <li>项羽</li>
            <li>苏东坡</li>
            <li>诸葛亮</li>
            <li>孙尚香</li>
            <li>虞姬</li>
        </ul>
    </div>
</body>
</html>

JavaScript部分：

<script>

        //插入数组
        let arr = [
            '刘禅',
            '李白',
            '张飞',
            '曹操',
            '关羽',
            '项羽',
            '苏东坡',
            '诸葛亮',
            '孙尚香',
            '虞姬'
        ];
		// 获取对象
        let btuEle = document.querySelector("#btu");
        let btu1Ele = document.querySelector("#btu1");
        let nameEle = document.querySelector(".name");
        let liEle = document.querySelectorAll("li");

        let t;
        let index;
        btuEle.addEventListener("click", function () {
            // btuEle.disable=false;
            // 3.3 计时器
            t = setInterval(function () {
                //  3.1 随件索引位置获取
                index = Math.floor(Math.random() * arr.length);
                for (let i = 0; i < liEle.length; i++) {
                	//先移除标签有"change"这个类
                    liEle[i].classList.remove("change");
                }
                //再给点击的标签(当前对象)添加"change"这个类
                liEle[index].classList.add("change");
                // 3.2 将随机的数据放到span中
                nameEle.innerText = arr[index];
            }, 50)
        })
        //添加点击事件
        btu1Ele.addEventListener("click", function () {
            clearInterval(t);
        });
    </script>