抽名字

ycxom2024年12月15日大约 1 分钟

抽名字

const btn = document.querySelector('.btn')
const btnSlice = document.querySelector('.btn-slice')
const uname = document.querySelector('.uname')

const arr = ['蔡徐坤','陈立农','范丞丞','黄明昊','林彦俊','朱正廷','王子异','王琳凯','尤长靖']
let arr1 = arr.slice()  // 浅拷贝

// 初始化
let n = false
let i

btn.addEventListener('click',() => {
    // 强判断 === 1
    if(arr1.length === 1){
        btn.innerHTML = '重来？'
        arr1.pop()  // 删除数组的最后一个元素，确保能进行接下来的if()
        console.log(arr1)
        return alert('点完了')
    }
    
    // 强判断 === 1
    if(arr1.length === 0){
        arr1 = arr.slice() // 重新赋值
        n = false // 重置
    }

    // n 为false 启动定时器，确保 定时器不被重复启动。
    if(n === false){
        // 定时器赋值n 确保 能被关闭
        n = setInterval(() => {
            i = parseInt(Math.random() * arr1.length)
            uname.innerHTML = arr1[i]
        },35)
        btn.innerHTML = '停'
    } else {
        btn.innerHTML = '继续'
        StopTnterval()  // 关闭定时器
        arr1.splice(i,1)
        console.log(arr1)
    }
})

btnSlice.addEventListener('click',() => {
    arr1 = arr.slice()
    StopTnterval()  // 关闭定时器
    uname.innerHTML = null
    btn.innerHTML = '启动'
})

// 关闭定时器
function StopTnterval() {
    clearInterval(n) // 关闭定时器
    n = false // 重置
}

完整HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn">启动</button>
    <button class="btn-slice">重置</button>
    <div class="uname"></div>

    <script>
        const btn = document.querySelector('.btn')
        const btnSlice = document.querySelector('.btn-slice')
        const uname = document.querySelector('.uname')

        const arr = ['蔡徐坤','陈立农','范丞丞','黄明昊','林彦俊','朱正廷','王子异','王琳凯','尤长靖']
        let arr1 = arr.slice()
        let n = false
        let i

        btn.addEventListener('click',() => {
            if(arr1.length === 1){
                btn.innerHTML = '重来？'
                arr1.pop()
                console.log(arr1)
                return alert('点完了')
            }
            
            if(arr1.length === 0){
                arr1 = arr.slice()
                n = false
            }

            if(n === false){
                n = setInterval(() => {
                    i = parseInt(Math.random() * arr1.length)
                    uname.innerHTML = arr1[i]
                },35)
                btn.innerHTML = '停'
            } else {
                btn.innerHTML = '继续'
                StopTnterval()
                arr1.splice(i,1)
                console.log(arr1)
            }
        })

        btnSlice.addEventListener('click',() => {
            arr1 = arr.slice()
            StopTnterval()
            uname.innerHTML = null
            btn.innerHTML = '启动'
        })

        function StopTnterval() {
            clearInterval(n)
            n = false
        }
    </script>
</body>
</html>