【多次点击“开始闪”按钮后为什么三个格子闪得越来越快？ _事件 _操作DOM 】

多次点击“开始闪”按钮后为什么三个格子闪得越来越快？

我也踩过这个坑( 2 )

已统计您的踩坑,无需重复点击

回答(2)

事件操作DOM

详细描述

截图

代码

// 获取随机颜色
var randomColor = function() {
    var c = '0123456789abcdef'
    var color = '#'
    for (var i = 0; i < 6; i++) {
        num = [Math.floor(Math.random() * 16)]
        color += c[num]
    }
    // console.log('color', color)
    return color
}

// 返回范围随机数
var rnd = function(start, end) {
    return Math.floor(Math.random() * (end - start) + start)
}

var e = function(selector) {
    return document.querySelector(selector)
}
var es = function(selector) {
    return document.querySelectorAll(selector)
}

// 点击开始闪 随机获取3个li标签，并设置颜色
var clickButton = function() {
    var button = e('.button')
    var ul = e('ul')
    var li = es('li')

    button.addEventListener('click', function(event) {
        var target = event.target
        if (target.innerHTML === '开始闪') {
            // 每秒，随机设置3个li元素的背景颜色
            window.id = setInterval(function() {
                // 恢复默认样式
                for (var i = 0; i < li.length; i++) {
                    li[i].style.backgroundColor = 'pink'
                }
                // 用于不重复的获取ul的子元素
                var l = [0, 1, 2, 3, 4, 5, 6, 7, 8]

                // 给随机三个元素随机设置背景颜色
                for (var i = 0; i < 3; i++) {
                    // 获取范围内的随机数
                    var n = rnd(0, l.length - 1)
                    // 获取l里的值(对应li元素)
                    var num = l[n]
                    // 获取随机颜色
                    var color = randomColor()
                    // 设置背景颜色
                    li[num].style.backgroundColor = color
                    // 删除用过的元素，保证不重复设置
                    l.splice(n, 1)
                }
            }, 1000)
        // 点结束停止播放
        } else if (target.innerHTML === '结束闪') {
            // 恢复默认样式
            for (var i = 0; i < li.length; i++) {
                li[i].style.backgroundColor = 'pink'
            }
            window.clearInterval(id)
        }
    })
}
clickButton()

编辑于2024-11-24

时间排序

热门排序

[深圳|结业弟子]JS-江雪茜
0

开始闪的函数里需要设置定时函数，保证各自按照一定时间来闪，来换颜色，但是每次重新点击时定时函数需要清除，不然会有累加效果，越点越快。要注意的是，在结束闪里面需要清除定时函数，我们需要把定时函数作为一个全局函数。

查看全部>

编辑于2018-08-24
[深圳|结业弟子]JS-韩鹏
0

我的解决思路是在点击事件上加一个状态（抽象成一个开关），在打开状态下不能再进行点击（或者点击没有作用）。

var swi = "off";
var Start = function () {
  if (swi === "off"){ // 判断开关状态，关着的话可以点击开始闪烁
init = setInterval("flashing()",1000);
}
  swi = "on"; // 打开开关
};
var Stop = function () {
clearInterval(init);    // 清除定时器
for (var i = 0; i < box.length; i ++){ // 循环遍历每个盒子，将背景颜色清除
box[i].style.backgroundColor = "";
}
  swi = "off"; // 关闭开关
};

查看全部>

编辑于2018-11-17

去第页