随机点名器实现相关代码 HTML CSS JS

最新推荐文章于 2024-12-11 10:59:10 发布

FYTYSER

最新推荐文章于 2024-12-11 10:59:10 发布

阅读量674

点赞数 12

CC 4.0 BY-SA版权

文章标签： css javascript html

本文链接：https://blog.csdn.net/FYTYSER/article/details/137791027

本文介绍了一个使用HTML、CSS和JavaScript编写的点名器，它能随机显示预设的姓名列表，并在点击开始按钮后切换显示姓名和隐藏状态。

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

实现效果图片:

代码:

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点名器</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        .box {
            width: 390px;
            height: 220px;
            background-image: url(./imgs/t015815bdb897cdb6ce.jpg);
            background-size: contain;
            border: 2px solid #000;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;


        }

        .box1 {
            width: 150px;
            height: 50px;
            background-color: #fff;
            border-radius: 10px;
            line-height: 50px;
            text-align: center;


        }

        .box2 {
            width: 300px;
            height: 50px;

            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            color: #fff;


        }

        .left {
            width: 80px;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 20px;
            line-height: 40px;
            text-align: center;

        }
    </style>
</head>

<body>
    <div class="box container">

        <div class="box1">
            姓名
        </div>
        <div class="box2 ">
            <div class="left">
                开始
            </div>

        </div>
    </div>
    <script>
        let content = document.querySelector('.box1');
        let begin = document.querySelector(".left");

        let name = ['刘畅', '刘晨旭', '谢帅', '王小慧', '候丁丁', '王展行', '王海洋']
        function randColor() {
            let r = Math.floor(Math.random() * 256);
            let g = Math.floor(Math.random() * 256);
            let b = Math.floor(Math.random() * 256);
            return `rgb(${r},${g},${b})`;
        }
        let timer = null;
        let falg = true;
        begin.onclick = function () {
            if (falg == true) {
                timer = setInterval(function () {
                    content.style.color = randColor();
                    // content.style.backgroundColor = randColor();
                    let index = Math.floor(Math.random() * name.length);
                    content.innerText = name[index];

                }, 50);
                begin.innerText = "结束"
                falg = false;
            }
            
             else {
                clearInterval(timer)
                begin.innerText = "开始"
                falg = true;
            }

        }

    </script>
</body>

</html>

commom.css

 *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.container {
    width: 960px;
    margin: 0 auto;

}

随机点名器实现 相关代码 HTML CSS JS

随机点名器实现相关代码 HTML CSS JS