表格随机点名

最新推荐文章于 2024-07-23 14:51:29 发布

༒消逝的光芒

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量112

点赞数

文章标签： css html 前端 javascript

本文链接：https://blog.csdn.net/qq_43350503/article/details/128163801

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        table {
            width: 500px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            text-align: center;
            border-collapse: collapse;
        }

        td {
            width: 100px;
            height: 40px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }

        .hover {
            background-color: rgba(0, 0, 0, 0.5);
        }

        div {
            width: 500px;
            margin: 50px auto;
            text-align: center;
        }
        .zz{
            margin: 0 auto;
        }
        .start,.end{
            width: 100px;
            height: 50px;
            font-size: 25px;
            margin: 0 auto;
        }
    </style>

</head>

<body>

    <div>
        <table cellpadding="10px">
            <tr>
                <td>吕布</td>
                <td>赵云</td>
                <td>典韦</td>
                <td>关羽</td>
                <td>马超</td>
            </tr>
            <tr>
                <td>张飞</td>
                <td>黄忠</td>
                <td>许褚</td>
                <td>孙策</td>
                <td>太史慈</td>
            </tr>
            <tr>
                <td>夏侯敦</td>
                <td>夏侯渊</td>
                <td>张辽</td>
                <td>张颌</td>
                <td>徐晃</td>
            </tr>
            <tr>
                
                <td>庞德</td>
                <td>甘宁</td>
                <td>周泰</td>
                <td>魏延</td>
                <td>张绣</td>
            </tr>
        </table>
    </div>
    <div class="zz">
    <button class="start">开始</button>
    <button class="end">结束</button>
    </div>
   
    <script>
        // 数据数组
        var tdlist = document.querySelectorAll("td");
        var btns = document.querySelector(".start");
        var btne = document.querySelector(".end");
        var table = document.querySelector("table");
        var setTime //提前定义点击事件的名称 

        btns.addEventListener('click', function () {
            clearInterval(setTime)//提前清除
            setTime = setInterval(function change() {
            var num = Math.floor(Math.random() * 20);
           
            // 将所有td背景颜色初始化
            for (var i = 0; i < tdlist.length; i++) {
                tdlist[i].className = "";
            }
            tdlist[num].className = "hover";
        },25);
        }

        )
        btne.addEventListener('click', function () {
            clearInterval(setTime)
        })
        
    </script>
</body>

</html>