在一段时间内增加值 JS答案

【问题标题】：Increasing Values Over A Time Period JS在一段时间内增加值 JS
【发布时间】：2015-08-14 15:16:32
【问题描述】：

好的，关于我的最后一个问题。我目前有这个代码：

var secs = 100;
setInterval(function() {
    var $badge = $('#nhb_01');
    $badge.text((parseFloat($badge.text())+0.01).toFixed(2));
}, secs);

基本上，我需要计数器每分钟增加一个特定值。

所以我需要的值之一是 0.17。

所以我需要计数器每分钟增加 0.17。所以 2 分钟后，计数器会显示 0.34，依此类推。

我该怎么做，因为计算一分钟应该花费多少毫秒变得如此痛苦和困惑！

感谢您的帮助！

Demo.

【问题讨论】：

setInterval 延迟以毫秒为单位，因此您应该设置secs = 1000 * 60; 以使其每分钟更新一次
这是根据@RoryMcCrossan 的建议为您编辑的 jsfiddle。 jsfiddle.net/jehtmrj5/2

标签： javascript jquery timer counter

【解决方案1】：

与其每次都从元素中抓取文本，不如只保持 JS 计数器递增（更有效）：

var secs = 1000 * 60;
var count = 0;
setInterval(function() {
    var $badge = $('#nhb_01');
    count += 0.17;
    $badge.text(count.toFixed(2));
}, secs);

DEMO - 运行速度比平时快一点，因此您可以看到效果。

【讨论】：

【解决方案2】：

var secs = 60 * 1000;
setInterval(function() {
    var $badge = $('#nhb_01');
    $badge.text((parseFloat($badge.text())+0.17).toFixed(2));
}, secs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="nhb_01">0</div>

【讨论】：

【解决方案3】：

如果您要跟踪经过的时间，这里有一个函数可以根据增加的速度和经过的时间为您提供徽章的价值。只需在更新徽章上显示的值时定期调用它即可。

function calcIntervalValue(ratePerMinute, elapsedTimeInMilliseconds) {
  var elapsedTimeInMinutes = elapsedTimeInMilliseconds / 60000; //60000 miliseconds in a minute
  return ratePerMinute * elapsedTimeInMinutes
}

var twoMinutes = 120000 //in milliseconds
alert( calcIntervalValue(0.17, twoMinutes) )

【讨论】：

【解决方案4】：

setInterval 将此设置中的最后一个参数以毫秒为单位，它应该是一个简单的等式：1000 毫秒 * 60 = 1 分钟

所以创建一个变量就是这样：

var ms = 1000 * 60;

现在您必须定义要添加到某个值的数量

var toAdd = 0.17;

以下是一些基本标记的示例

<!DOCTYPE html>
<html>
    <head>
        <title>Increasing a number with setInterval</title>
    </head>
    <body>
        <h2>Increasing a number with setInterval</h2>
        Number: <span id="counter"></span>
    </body>
</html>

这里是一些带有我们刚刚创建的变量的注释 JavaScript

    // make a reference to the element which should hold the updated value
    var counterElem = document.getElementById('counter');
    // define a variable with the value you want to add to
    var toAdd = 0.17;
    // define the interval for the task. I made this frequency faster for demonstration purpose.
    var ms = 10 * 60;
    //now make the setInterval
    setInterval(function() {
        // parse the innerHTML to a float
        var count = parseFloat(counterElem.innerHTML);
        // Check that the count variable actually is a number and add the toAdd and the count together, and if not just add the initial value to id (0.17) because then it is probably the first time the interval checks the element.
        counterElem.innerHTML = (!isNaN(count) == true ? count + toAdd : toAdd);
    }, ms);

这里是一个正在使用的脚本示例：https://jsfiddle.net/whyyc81a/

【讨论】：

【解决方案5】：

在给定帧率的情况下从起始值到结束值的增量。

深受@Dan-Levi Tømta's answer 的启发。

HTML

<h2>Increment Value over a Duration with a given framerate</h2>
Value: <span id="value">0</span>

JS

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

var start     = 0;
var end       = 100;
var duration  = 10000; // 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 : toAdd);
}, framerate);

jsFiddle

https://jsfiddle.net/L3Ln1f7b/

在这个基础上，你可以做很多事情。调整帧率有助于解决性能问题，持续时间可以让您加快或减慢速度

【讨论】：