Question

我尝试制作一个脚本，在每次选择更改时将数字增加到所选数字。例如，如果用户选择30，我希望数字以每秒30个值的速率增加，因此它在一秒内达到30。

我不知道出了什么问题，但是在执行此脚本时，它只会在第一页加载时递增，但不会更改值。

var valueElement = document.getElementById('value');

var option = document.getElementById('option');

var start     = 0;
var end       = parseFloat(option.innerHTML);
var duration  = 1000; // In milliseconds (divide by 1000 to get seconds).
var framerate = 50;    // In milliseconds (divide by 1000 to get seconds).

var toAdd = ( ( end - start ) * framerate ) / duration;

var interval = setInterval(function() {
var currentValue = parseFloat(valueElement.innerHTML);

if (currentValue >= end) {
  clearInterval(interval);
return;
}

valueElement.innerHTML = (!isNaN(currentValue) == true ? (currentValue +   toAdd).toFixed(2) : toAdd);
 }, framerate);

Answer 1

看起来您只需将更改事件处理程序绑定到select /选项。将MDN's Event documentation添加到脚本以处理更改和更新值时，请参考https://www.debian.org/doc/debian-policy/#version。

简而言之，如果您想使用像jQuery这样的框架，可以大大简化流程和脚本。

Answer 2

你可能正在过度思考这项任务。我还发现在控制台和 JSFiddle 中有错误和改变的事情。例如，没有名称选项的元素。

https://www.khanacademy.org/computing/computer-programming/html-css-js/html-js-dom-animation/p/animating-dom-with-setinterval https://www.khanacademy.org/computer-programming/spin-off-of-challenge-stopwatch/6144204027232256

让我们从基本的东西开始：秒表

定义变量以获得更好的方便，更好，更常见的做法，以及更高的效率
- 可以使用counterEl在ID＆＃39;每日＆＃39;上使用document.getElementById()初始化span元素的变量selectEl。
- 可以使用document.getElementById()在id＆＃39;值＆＃39;上使用currentTime初始化select元素的变量counterEl。
- 可以调用float的类型null变量，通过调用parseFloat()上的countEl.textContent将stopwatch转换为setInterval数据类型。
- 一个名为selectElement.addEventListener("change", myFunction);的类型null变量，当您使用resetStopwatch() {}时将对其进行初始化。

I also used the linking Stack Overflow question for help

每次更改值时，都会向select元素添加一个事件侦听器：countEl.textContent
创建全局函数currentTime
- 将stopwatch = window.setInterval(countUp, 1000);设为0。
- 只是为了好的衡量标准，将countUp设置为0。
- // Turns the value into a float so it can be incremented and compared (textContent is a string) currentTime = parseFloat(seconds.textContent); // Add 1 second every time function is called seconds.textContent = currentTime + 1; if (seconds.textContent >= selectElement.value) { window.clearInterval(stopwatch); // Stops the stopwatch if the seconds reached the selected option console.log("My time has been cleared"); }
创建全局setInterval功能

这里的所有内容都在评论中解释。

 stopwatch = window.setInterval(countUp, 1000/incrementRate.value);

现在让我们稍微调整一下，使它成为一个反向秒表＆＃39;

在{{1}}中，您希望它在一秒钟内递增多个，因此您可以将调用更改为

{{1}}

使用我的 JS小提琴获取解决问题的指导： https://jsfiddle.net/404_Error/z0t4spob/

更新持续时间内的增量值

2 个答案:

让我们从基本的东西开始：秒表

现在让我们稍微调整一下，使它成为一个反向秒表＆＃39;