递增滑块步数1

Question

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

.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); 
}); 

在这一点上，手动输入值的变化与e.target.value

当我实现这个解决方案由一个移动滑块，然而，的textContent不会改变，由于某种原因滑块从跳跃为什么会发生这种情况，任何人都可以推荐解决方案？

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

Answer 1

你在你的代码的两个缺陷：

• 要增加滑块的值，请使用slider.stepUp()。您的行 document.getElementById("slider").value += 1不能像 那样工作，因为该值是最初为'0'的字符串。在 的Javascript，'0' + 1计算结果为“01”，并随后'01' + 1 计算为其中，当转换为一个数字，被解释为 11.

• 此外，input事件仅触发用于用户输入“011”，而不是当编程更改滑块的值时 。在这种情况下，您可以将例如 手动发送一个input事件，然后按照预期由您的事件侦听器处理 。另请参见：Trigger change Event when the Input value changed Programatically?

此外，map在filterBy()未定义我。

实施例：

var slider = document.getElementById("slider"); 
 
var variable = document.getElementById('variable'); 
 

 
slider.addEventListener('input', function(e) { 
 
    variable.textContent = slider.value; 
 
}); 
 

 
var interval = setInterval(function() { 
 
    slider.stepUp(); 
 
    slider.dispatchEvent(new Event('input')); 
 
    if (slider.value == 23) clearInterval(interval); 
 
}, 1000);

<label id='variable'></label> 
 
<input id='slider' type='range' min='0' max='23' step='1' value='0' />

Answer 2

这是因为document.getElementById("slider").value的值是一个字符串。在控制台上，如果运行"1" + 1，则会得到结果“11”，其中包含一种字符串。奇怪的是，尽管它是一个滑块，它并不会自动返回一个数字。

修复方法是尝试将值转换为数字。对于标签，因为你只是在期待它的文字，你可以设置它的innerHTML与滑块的值（假设这是你想要做什么）：

var input = document.getElementById('slider'); 
 
var label = document.getElementById('variable'); 
 

 
//initialize label 
 
label.innerHTML = input.value; 
 

 
function myTimer() { 
 
    var newValue = parseInt(input.value) + 1; 
 
    input.value = newValue; 
 
    label.innerHTML = newValue; 
 
} 
 

 
setInterval(myTimer, 1000);

<label id='variable'></label> 
 
<input id='slider' type='range' min='0' max='23' step='1' value='0' />

至于价值的进展，请尝试以下操作：

var input = document.getElementById('slider'); 

// returns 0 
input.value = 0; 
console.log(input.value); 

// returns 1, because you give it a value of "01" 
input.value += 1; 
console.log(input.value); 


// returns 11, because you give it a value of "011" 
input.value += 1; 
console.log(input.value); 

// returns 23 because you give it a value of "111" but the max is 23 
input.value += 1; 
console.log(input.value);