在更新的持续时间内增加值答案

【问题标题】：Increment Value over a Duration on Update在更新的持续时间内增加值
【发布时间】：2018-11-26 17:21:43
【问题描述】：

我正在尝试编写一个脚本，以便在每次选择更改时将一个数字增加到所选数字。例如，如果用户选择 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);

【问题讨论】：

标签： javascript html increment

【解决方案1】：

您可能想多了这项任务。我还发现控制台和 JSFiddle 中存在错误和需要更改的内容。例如，没有带有 name 选项的元素。

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 使用document.getElementById() 在id 'daily' 上初始化span 元素。
- 一个可以调用的变量selectEl 使用document.getElementById() 在id 'value' 上初始化选择元素。
- 可以调用currentTime 的类型空变量，通过在countEl.textContent 上调用parseFloat() 将counterEl 转换为float 数据类型。
- 一个名为 stopwatch 的类型 null 变量将在您使用 setInterval 时被初始化。

I also used the linking Stack Overflow question for help

为 select 元素添加一个事件侦听器，用于每次其值发生变化时，如下所示：selectElement.addEventListener("change", myFunction);
创建一个全局函数resetStopwatch() {}
- 将countEl.textContent 设置为0。
- 为了更好地衡量，也将 currentTime 设置为 0。
- stopwatch = window.setInterval(countUp, 1000);
创建全局countUp函数

这里的一切都在 cmets 中进行了解释。

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

使用 my JS Fiddle 来指导您解决问题： https://jsfiddle.net/404_Error/z0t4spob/

【讨论】：

您好 Varun，感谢您的帮助。我的想法实际上是，一旦选择选项更改，它应该将值重置为 0。就像我选择 10 一样，它应该在 1 秒内从 0 运行到 10。当我将选择值更改为 30 时。它应该在 1 秒内从 0 运行到 30。
@User1010，好的，我明白了。我编辑了我的帖子以更好地回答您的问题。我还在努力，但在问题完全解决之前我还需要解决一些问题，所以请耐心等待，我希望我们都能尽快解决这个难题！
我再次编辑了帖子，并且非常接近完成解决方案。现在，我正在修改countup 函数，因为控制台显示stopwatch 在达到所选选项值后未定义并且秒表继续递增。
嗨，user1010，我已经编辑了我的帖子来解决您的问题，如果您还有什么需要或不明白的，请告诉我。
嗨 Varun，感谢您的坚持，非常感谢您。我实际上没有看到你的调整，但我现在已经在我的代码中实现了它。谢谢。

【解决方案2】：

看起来您只需要将更改事件处理程序绑定到您的选择/选项。参考MDN's Event documentation 将其添加到您的脚本以处理值的更改和更新。

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

【讨论】：