javascript - 更新持续时间内的增量值

Question

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

我不知道出了什么问题，但是当执行这个脚本时，它只在第一页加载时递增，但没有值变化。

https://jsfiddle.net/User1010/b7znc3fL/

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

您可能想多了这个任务。我还发现控制台和 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

让我们从一些基本的东西开始:秒表

1. 为了更方便、更好、更常见的做法和更高的效率而定义变量
   • 一个可以调用 counterEl 的变量，使用 document.getElementById() 在 id 'daily' 上初始化 span 元素。
   • 一个可以调用 selectEl 的变量，使用 document.getElementById() 对 id 'value' 初始化选择元素。
   • 可以调用 currentTime 的类型 null 变量，它将通过调用 parseFloat() 将 counterEl 转换为 float 数据类型 在 countEl.textContent 上。
   • 一个名为 stopwatch 的类型 null 变量，将在您使用 setInterval 时初始化。

I also used the linking Stack Overflow question for help

1. 每当 select 元素的值发生变化时，向它添加一个事件监听器，如下所示:selectElement.addEventListener("change", myFunction);

2. 创建全局函数 resetStopwatch() {}

   • 将 countEl.textContent 设置为 0。
   • 为了更好的衡量，将 currentTime 也设置为 0。
   • stopwatch = window.setInterval(countUp, 1000);

3. 创建全局countUp 函数

这里的一切都在评论中解释。

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