如何通过JavaScript获取Slider值，动态修改背景色切换时间间隔？

当前代码中setInterval仅在初始化时执行一次，无法响应滑块值的变化。要实现动态调整切换间隔，核心思路是在滑块值改变时清除旧定时器，并使用新的间隔值创建新定时器。

修改后的完整代码 #

HTML #

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">   
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Color Change</title>
</head>
<body id="colo">
<input id="speed" type="range" min="10" max="10000" step="1.0" value="1000">
<output id="output">1000</output>
</body>
</html>

CSS（无需修改） #

body {
background-color: #DBF9FC;
}

JavaScript #

let i = 0;
let intervalId; // 存储定时器ID，用于清除旧定时器
const colors = ["yellow", "blue", "red", "green", "orange","pink","lightblue","purple"];

function colorchange() {
    const doc = document.getElementById("colo");
    doc.style.backgroundColor = colors[i];
    i = (i + 1) % colors.length;
}

// 统一处理定时器的启动与更新
function startColorChange(interval) {
    // 清除已存在的定时器，避免重复触发
    if (intervalId) {
        clearInterval(intervalId);
    }
    // 创建新定时器
    intervalId = setInterval(colorchange, interval);
}

// 获取滑块和输出元素
const speedSlider = document.getElementById("speed");
const output = document.getElementById("output");

// 监听滑块值变化事件
speedSlider.addEventListener("input", function() {
    const newInterval = Number(this.value);
    output.textContent = newInterval;
    startColorChange(newInterval);
});

// 页面初始化时启动定时器
startColorChange(Number(speedSlider.value));

关键改动说明 #

1. 新增intervalId变量：用于保存定时器ID，确保每次滑块值变化时能清除旧的定时器，避免多个定时器同时运行。
2. 封装startColorChange函数：统一处理定时器的清除与创建逻辑，减少重复代码。
3. 滑块事件监听：通过input事件实时获取滑块的最新值，转换为数字类型后更新输出文本，并重启定时器。
4. 初始化处理：页面加载时调用startColorChange，确保初始切换间隔与滑块默认值一致。

内容的提问来源于stack exchange，提问作者saibot_90