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不会更改，并且由于某种原因滑块从1跳到11.为什么会发生这种情况并且任何人都可以推荐解决方案？

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

Answer 1

这是因为document.getElementById("slider").value的值是一个字符串。在控制台上，如果你运行"1" + 1，你会得到结果＆＃34; 11＆＃34;用一种字符串。奇怪的是，尽管它是一个滑块，但它不会自动返回一个数字。

修复方法是尝试将值转换为数字。对于标签，由于您只想要其中的文字，您可以使用滑块的值设置它的innerHTML（假设您想要做的事情）：

＆＃13;

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

＆＃13;

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

＆＃13;

关于价值的进展，请尝试以下方法：

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

Answer 2

您的代码中有两个缺陷：

要增加滑块的值，请使用slider.stepUp()。你的路线 document.getElementById("slider").value += 1不起作用因为该值是最初为“0”的字符串。在 Javascript，'0' + 1评估为'01'，随后'01' + 1 评估为'011'，当转换为数字时，将被解释如11。
此外，input事件仅针对用户输入触发，而不是针对用户输入触发以编程方式更改滑块的值。在这种情况下，你可以例如手动调度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' />

增量滑块逐步增加

2 个答案: