实现随机点名（html+css+javaScript）

学前端的小萌新777

已于 2023-08-17 20:18:51 修改

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css html javascript 前端 css3

于 2023-08-17 19:54:28 首次发布

本文链接：https://blog.youkuaiyun.com/Achen2282751920/article/details/132348169

本文详细描述了一个HTML页面，使用CSS和JavaScript实现了一个点名功能，包括开始和结束点名按钮，以及随机显示名字并改变颜色。同时，还涉及了定时器的使用和元素的交互设计，如关闭提示框和跳转链接。

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

<!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>Document</title>
    <style>
        .box {
            width: 500px;
            height: 400px;
            border: 1px solid green;
            margin: 100px auto;

        }

        .btns {
            width: 100%;
            height: 200px;
            display: flex;
            justify-content: space-around;

            background-color: skyblue;
        }

        button {
            margin-top: 40px;
            width: 100px;
            height: 100px;
            background-color: red;
            font-size: 30px;
            border-radius: 50%;

        }

        #nameBox {
            width: 100%;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            font-weight: bold;
            background-color: aqua;
        }


        .box1 {
            width: 400px;
            height: 600px;
            border: 1px solid red;
            position: fixed;
            bottom: 0;
            right: 0;
            background: url(img/6.gif) no-repeat;
            background-size: 100% 100%;
            /* display: none; */
            opacity: 0;
            /* transform: translate(200px,300px); */
            animation:move;
        }
     
        marquee {
            font-size: 28px;
            color: red;
            margin-top: 30px;
        }

        span {
            cursor: pointer;
        }
    </style>
    <script src="../jsTOOL/data.js"></script>
    <script src="../jsTOOL/tool.js"></script>
</head>

<body>
    <div class="box">
        <div class="btns">
            <button id="btn1">开始点名</button>
            <button id="btn2">结束点名</button>
        </div>
        <div id="nameBox">陈麒麟</div>
    </div>
    <div class="box1" id="box1">
        <span style="color:aliceblue" id="close">关闭</span>
        <marquee behavior="" direction="">大家好，我是神仙姐姐，支持我就送小花花！！！！</marquee>
    </div>
    <script>
        var btn1 = document.getElementById('btn1')
        var btn2 = document.getElementById('btn2')
        var nameBox = document.getElementById('nameBox')
        var timer = null
        var box = document.getElementById('box1')
        var close = document.getElementById('close')

        //  nameBox.innerText = '杜鑫'
        // console.log(nameList)

        // 2. 给btn1 绑定事件


        btn1.onclick = function () {
            function getColor() {
                return 'rgb(' + randomNum(0, 255) + ',' + randomNum(0, 255) + ',' + randomNum(0, 255) + ')'
            }
            // console.log(123)
            // 开启定时器  
            timer = setInterval(function () {
                // 随机索引  
                var index = randomNum(0, nameList.length - 1)
                // console.log(nameList[index])
                // 设置nameBox的内容  
                nameBox.innerText = nameList[index]
                document.getElementById('nameBox').style.color = getColor()
                document.getElementById('nameBox').style.backgroundColor = getColor()
            }, 10)
        }


        // 3.给btn2 绑定事件


        btn2.onclick = function () {
            // console.log(456)
            clearInterval(timer)
        }
        setTimeout(function () {
            box.style.opacity = 1
        }, 5000)

        close.onclick = function (e) {
            e.stopPropagation()

            box.style.opacity = 0
            setTimeout(function () {
                box.style.opacity = 1
            }, 10000)
        }
        box.onclick = function (e) {
            //   e.stopPropagation()
            window.location.href = 'http://www.4399.com'
        }     
    </script>
</body>

</html>

定义timer的目的是为了确保只有一个定时器在运行。在这段代码中，当点击btn1时，会开启一个定时器，并且每隔30毫秒执行一次定时器中的函数。如果没有定义timer，那么每次点击btn1时都会开启一个新的定时器，导致多个定时器同时执行，可能会造成程序混乱或无法控制的效果。

通过定义一个timer变量并将定时器的返回值赋值给它，可以方便地取消之前开启的定时器。当再次点击btn1时，可以先取消之前的定时器，再开启一个新的定时器，确保只有一个定时器在运行。这样可以避免多个定时器交叉执行的问题，保持程序的稳定性和可控性。

封装一个tool.js工具

/*
*
区间的随机整数
@params { Number}  a, b表示数字
@return a, b区间的一个随机整数
*
*/

function randomNum(a, b) {
    var min = Math.min(a, b)
    var max = Math.max(a, b)
    return Math.floor(Math.random() * (max - min + 1)) + min
}