JavaScript---随机点名小案例

最新推荐文章于 2024-06-21 16:41:46 发布

velpro_!

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量42

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_52053631/article/details/131927486

版权

<body>
<div>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <span class="qs">小1</span>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>
</div>

<script>
    const arr = ["小1", "小2", "小3", "小4", "小5", "小6"]
    let timerId = 0
    let random = 0   // 需要重新赋值不能用const
    // 开始
    const start = document.querySelector(".start")
    start.addEventListener("click", function () {
        timerId = setInterval(function () {
            random = parseInt(Math.random() * arr.length)
            const qs = document.querySelector(".qs")
            qs.innerHTML = arr[random]
        }, 100)

    })

    // 结束
    const end = document.querySelector(".end")
    end.addEventListener("click", function () {
        clearInterval(timerId)
        arr.splice(random, 1)
        if (arr.length === 0) {
            start.disabled = true
            end.disabled = true
        }
    })

</script>