定时器的累加效果

 // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']

        // 1. 需求：当 用户点击 开始按钮时 需要从 数组里面 随机的抽取一个元素出来 将抽取的元素显示到 class="qs"元素里面
        // 1.1 需要获取到 class="start" dom对象
        // 1.2 需要给 class="start" dom对象 注册鼠标点击事件
        // 1.3 开启定时器 
        // 1.4 随机从数组里面 抽取一个元素 
        // 1.5 将 抽取到元素 显示到 class="qs" 元素里面

        // 1.1 需要获取到 class="start" dom对象
        const start = document.querySelector('.start')
        // 获取 class="qs"的 dom对象
        const qs = document.querySelector('.qs')
        let id
        let i

        // 1.2 需要给 class="start" dom对象 注册鼠标点击事件
        start.onclick = function () {
            // 我们在不停的点击开始按钮  每点击一次就会产生一个定时器 多个定时器就会叠加在一起 速度变快
            // 不管用户点击多少次 仅仅只产生一个定时器
            if (id) {
                clearInterval(id)
            }
            // 1.3 开启定时器 
            id = setInterval(function () {
                // 1.4 随机从数组里面 抽取一个元素 
                i = Math.floor(Math.random() * arr.length)
                // 1.5 将 抽取到元素 显示到 class="qs" 元素里面
                qs.innerHTML = arr[i]
            }, 30)
            // 3. 如果 数组里面 只有1个元素呢 需要将 开始按钮与结束按钮 设置为 禁用的效果
            if (arr.length === 1) {
                start.disabled = true
                end.disabled = true
            }
        }

        // 2. 需求：点击结束按钮 停止定时器 需要将数组里面 被选中的这个元素 从数组里面 删除
        // 2.1 获取 class="end" dom对象
        // 2.2 class="end" dom对象 注册点击事件
        // 2.3 停止定时器 需要将数组里面 被选中的这个元素 从数组里面 删除

        // 2.1 获取 class="end" dom对象
        const end = document.querySelector('.end')
        // 2.2 class="end" dom对象 注册点击事件
        end.onclick = function () {
            // 停止定时器 和 将被选中的这个元素 从数组里面 删除
            clearInterval(id)
            arr.splice(i, 1)
        }