js随机点名

最新推荐文章于 2023-01-14 16:59:29 发布

清酒独酌

最新推荐文章于 2023-01-14 16:59:29 发布

阅读量140

点赞数

分类专栏： javascript 文章标签： javascript 前端 css html

本文链接：https://blog.csdn.net/yang68668/article/details/121129520

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .wrapper {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid;
        }
        
        li {
            width: 80px;
            height: 30px;
            border: 1px solid red;
            list-style: none;
        }
        
        .box {
            display: flex;
            text-align: center;
            line-height: 30px;
            justify-content: center;
        }
        
        .start {
            width: 300px;
            height: 100px;
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <!-- 标题部分 -->
        <h1 style="text-align: center;">猜猜点到谁</h1>
        <!-- 
        放 名字 的  每一个名字就是一个li
       -->
        <ul class="box">
        </ul>
        <div class="click">
            <!-- 按钮：开始按钮和停止按钮 -->
            <button class="start">开始/停止</button>
        </div>
    </div>

    <script>
        /* 准备数据 */
        var nameString = new String('张三, 王二, 李四');
        /* 获取元素节点 */
        var box = document.querySelector('.box');
        /* 获取按钮 */
        var start = document.querySelector('.start');
        /* 将数组分割成数组 */
        var arr = nameString.split(',');

        /* 建立一个空 */
        var str = ''
            /* 遍历数组 */
        for (var i = 0; i < arr.length; i++) {
            /* 拼接li标签 */
            str += `<li>${arr[i]}</li>`
        }
        /* 把str 放入ul*/
        box.innerHTML = str;
        /* 保存幸运同学的下标 */
        var last_index = 0;
        /* 保存定时器的id */
        var timer = null;
        /* 给按钮添加点击事件 */
        start.onclick = function() {
                //已经开启了定时器，则点击start按钮，表示关闭，反之，表示开启定时器。
                //如何判断是否开启了定时器？  判断是否有这个定时器的ID
                if (timer) {
                    /* 清除定时器 */
                    clearInterval(timer);
                    /* 把值清空 */
                    timer = null;
                } else {
                    timer = setInterval(function() {
                        /* 生成随机数 */
                        var index = getRandom(0, arr.length - 1);
                        /* 获取所有的li标签 */
                        var lis = document.querySelectorAll('ul.box>li');
                        /* 把之前的颜色去掉 */
                        lis[last_index].style.backgroundColor = '';
                        /* 新同学加颜色 */
                        lis[index].style.backgroundColor = 'pink';
                        //将新同学的下标赋值给 last_index
                        last_index = index
                    }, 10);
                }
            }
            /* 随机数 */
        function getRandom(n, m) {
            return Math.floor(Math.random() * (m - n + 1) + n)
        }
    </script>
</body>