Javascript 按一步递增滑块

我有一个简单的滑块，分为24个步骤（0-23），每个步骤代表一天中的一小时。我的目标是为滑块设置一次动画，使输入和滑块的值每秒钟增加一次-从0开始增加到23，然后停止（总共24秒）。然后停止（循环结束）

---

这是因为

document.getElementById（“slider”）.value

的值是一个字符串。在控制台上，如果运行

“1”+1

，则会得到带有字符串类型的结果“11”。奇怪的是，尽管它是一个滑块，但它不会自动返回一个数字

解决方法是尝试将值转换为数字。对于标签，因为您只希望其中包含文本，所以可以使用滑块的值设置标签的innerHTML（假设您希望这样做）：

var input=document.getElementById（'slider'）；
var label=document.getElementById（'variable'）；
//初始化标签
label.innerHTML=input.value；
函数myTimer（）{
var newValue=parseInt（input.value）+1；
input.value=新值；
label.innerHTML=newValue；
}
设置间隔（myTimer，1000）
您的代码中有两个缺陷：


要增加滑块的值，请使用
slider.steppup（）
。你的线路
document.getElementById（“滑块”）.value+=1
不起作用
因为该值是一个字符串，最初为“0”。在里面
Javascript，
'0'+1
计算结果为'01'，随后
'01'+1
计算为“011”，当转换为数字时，将对其进行解释
如图11所示

另外，
input
事件仅在用户输入时触发，而不是在
以编程方式更改滑块的值。在这种情况下，你
例如，可以手动调度
输入
事件，然后
按预期由事件侦听器处理。另见：


另外，
filterBy（）
中的
map
对我来说是未定义的

例如：


var slider=document.getElementById（“slider”）；
var variable=document.getElementById（'variable'）；
slider.addEventListener（'input'，函数（e）{
variable.textContent=slider.value；
});
var interval=setInterval（函数（）{
slider.steppup（）；
slider.dispatchEvent（新事件（'input'））；
如果（slider.value==23）clearInterval（interval）；
}, 1000);

这解决了滑块问题，但是
filterBy（）
函数不起作用，
textContent
也没有改变。在这种情况下，我应该如何更改
.addEventListener（'input'，函数（e）
？filterBy到底应该做什么？它通过输入变量过滤地图上的两层。通过编程更改输入值不会触发事件。您可以做的是手动调用
filterBy（newValue）
在间隔内，但仅当值更改时。如果这样做，则无需修改filterBy的函数。拖动滑块时，仍需要事件处理程序。
.map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}

<div class='map-overlay-inner'>
    <h2>Passengers by hour</h2>
    <label id='variable'></label>
    <input id='slider' type='range' min='0' max='23' step='1' value='0' />
</div>

var variables = [ '0', '1', '2', '3', '4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23',
];

function filterBy(variable) {

    var filters = ['==', 'variable', variable];
    map.setFilter('circles', filters);
    map.setFilter('labels', filters);

    // Set the label to the hour
    document.getElementById('variable').textContent = variables[variable];
}
document.getElementById('slider').addEventListener('input', function(e) {
    var variable = e.target.value
    filterBy(variable);
});

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    document.getElementById("slider").value += 1;
}