html+css+js实现点名系统

最新推荐文章于 2024-05-17 14:32:46 发布

liyfn

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量961

点赞数 2

分类专栏：做点小玩具文章标签：前端 css javascript

本文链接：https://blog.csdn.net/qq_42825643/article/details/124180263

版权

做点小玩具专栏收录该内容

5 篇文章 2 订阅

订阅专栏

用随机数做了个点名系统，如下：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点名系统</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        button {
            display: block;
            margin: 10px auto;
            width: 100px;
            font-size: 20px;
        }
        p {
            margin-top: 30px;
            text-align: center;
            font-size: 30px;
        }
        
        ul {
            display: flex;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid black;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-around;
        }
        li {
            list-style: none;
            text-align: center;
            line-height: 30px;
            width: 100px;
            height: 30px;
            border: 1px solid #000;
        }
        
    </style>
</head>
<body>
    <p>今天谁扫地</p>
    <button onclick="begin()">开始</button>
    <button onclick="stop()">停止</button>
    <ul>
        <li class="box">张三</li>
        <li class="box">李四</li>
        <li class="box">王二</li>
        <li class="box">麻子</li>
        <li class="box">派大星</li>
        <li class="box">海绵宝宝</li>
        <li class="box">玛卡巴卡</li>
        <li class="box">蹦蹦</li>
        <li class="box">跳跳</li>
        <li class="box">恰恰</li>
        <li class="box">拉拉</li>
        <li class="box">星星</li>
    </ul>
    <script>
        var flag = true;
        var m = 0;
        var n = 0;
        function begin() 
        {
            if(flag)
            {
                let i = document.getElementsByClassName('box');
                s = setInterval(() => 
                {
                    i[n].style.backgroundColor = '#fff';
                    m = Math.floor(Math.random() * 12);
                    i[m].style.backgroundColor = 'red';
                    n = m;
                }, 100);
                flag = false;
            }   
        }   
        function stop() {
            clearInterval(s);
            flag = true;
        }
    </script>
</body>
</html>

liyfn

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+css+js实现点名系统

用随机数做了个点名系统，如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
复制链接

扫一扫