点名器随机点名器

最新推荐文章于 2024-07-12 13:57:41 发布

87小太阳

最新推荐文章于 2024-07-12 13:57:41 发布

阅读量342

点赞数 1

分类专栏： JS必会项目案例 JS案例 JS小游戏案例文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_53798158/article/details/127854325

版权

JS案例同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

JS必会项目案例

5 篇文章 0 订阅

订阅专栏

JS小游戏案例

5 篇文章 0 订阅

订阅专栏

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        #main {
            margin: 100px;
            width: 520px;
            background-color: #abcdef;
            border-radius: 10px;
            padding: 50px;
            box-shadow: 0 2px 12px #666666;
        }

        #box {
            background-color: #ff5511;
            margin: 50px;
            padding: 20px;
            font-size: 50px;
            font-weight: bold;
            border-radius: 15px;
            box-shadow: 0 2px 12px #666666;
        }


        #bt {
            width: 100px;
            font-size: 20px;
            font-weight: bold;
            background-color: aquamarine;
            border-radius: 8px;
            box-shadow: 0 2px 12px #666666;
            cursor: pointer;
            padding: 5;
        }
    </style>
</head>

<body>
    <center>
        <div id="main">
            <div id="box">点名器</div>
            <button id="bt" onclick="doit()">开始</button>
        </div>
    </center>
    <script>
        // 随机数 
        // 数组 

        // dom  
        // 点击事件 

        // 定时器 

        // 准备名单 
        var nameList = ["张三","李四","王五","赵六","陈七","刘六", "张三","李四","王五","赵六","陈七","刘六",
        "张三","李四","王五","赵六","陈七","刘六","张三","李四","王五","赵六","陈七","刘六",
        "张三","李四","王五","赵六","陈七","刘六","张三","李四","王五","赵六","陈七","刘六",];
        
        function show() {
            // 随机数 作为数组的下标  
            var num = Math.floor(Math.random() * 36);


            // 把上面根据下标num 取出来的元素放到指定的区域
            var box = document.getElementById('box');
            box.innerHTML = nameList[num];
            flag = setTimeout("show()",50);
        }

        // setInterval(show,100); 让名字一直滚动  




        // 需要一个按钮 触发它滚动  

        var btn = document.getElementById('bt');
        // btn.onclick = function(){


        // }

        // 用户点击 动起来 
        // 按钮变化 
        var flag = null; // 默认没有任何定时器在执行

        function doit() {
            if (flag == null) {
                // 动起来
                show();
                // 停止 
                btn.innerHTML = '停止';
                btn.style.backgroundColor = 'red';
            } else {
                // 不动了
                clearTimeout(flag);
                // clearInterval()
                // 开始
                btn.innerHTML = '开始';
                btn.style.backgroundColor = 'aquamarine';
                flag = null;


            }


           

        }
    </script>
</body>

</html>