创建计数器答案

【问题标题】：Creating a counter创建计数器
【发布时间】：2016-01-27 08:56:31
【问题描述】：

我正在创建一个计数器，但我很难做到。计数器的目标是每经过一秒，数字就会增加 170。正如你在下面看到的，这个数字没有加起来，而是在一个新的行上，主要是因为我不知道如何让它加起来。来自The Economist的这个时钟之类的东西@

<!DOCTYPE html>
<html>
<body>
<p>Click the button see how much AirHelps market increases by every second.</p>

<button onclick="counterFunction()">See it now</button>

<p id="counter"></p>

<script>
function counterFunction() {
setTimeout(function () {
    var text = "";
    var i = 170;
    while (i < 3500) {
        text += "<br>The number is " + i;
        i+=170;
    }, 1000) }

document.getElementById("counter").innerHTML = text;
}
</script>

</body>
</html>

关于如何做到这一点以及我的代码有什么问题有什么想法吗？

【问题讨论】：

标签： javascript loops time while-loop

【解决方案1】：

不要使用内联 JavaScript（HTML 元素属性中的 JavaScript），它的可维护性和可读性很糟糕。

您似乎对超时、间隔和 while 循环的工作方式有误解，您想要的是一个间隔。

在事件侦听器函数之外定义一个计数变量，然后在间隔的每次迭代中将计数变量加一并将该数字乘以 170。

我在其中添加了一点点，以便在单击按钮后隐藏按钮，只是为了阻止用户重新启动计数器。

var clicker = document.getElementById('clicker');
var counter = document.getElementById('counter');
var count = 0;

clicker.onclick = function() {
  setInterval(function () {
    counter.textContent = "The number is " + ++count * 170;
  }, 1000);
  clicker.style.display = 'none';
}

<p>Click the button see how much AirHelps market increases by every second.</p>

<button id="clicker">See it now</button>

<p id="counter"></p>

【讨论】：

【解决方案2】：

http://jsfiddle.net/mblenton/Le4vxzrn/2/

function counterFunction() {
    var text = ""; var i = 170;  var delay = 0;  var k = 1;
    while (i < 3500) {
        text = "The number is " + i;
        i += 170;
        delay = k * 1000;
        doSetTimeout(text, delay);
        k++; 
   }
 }

function doSetTimeout(text, delay) {
  setTimeout(function () {
    document.getElementById("counter").textContent = text;
 }, delay);
}

【讨论】：

【解决方案3】：

您需要使用setInterval，而不是setTimeout`。请注意，如果您单击该按钮，它将重置您的计时器。

您还需要在Interval范围之外声明var i和var text，否则它们也会在每次迭代时被重置。

【讨论】：

【解决方案4】：

您的代码有一些问题。除其他事项外：

您的 i 变量声明在错误的位置以供重复使用
你的右括号放错了回调函数的位置
您使用的是同步运行的while 循环，而您真的只想使用setInterval 调用。

这应该可行：

function counterFunction() {
  var i = 170;
  var text = "";
  var interval = setInterval(function () {
    text += "<br>The number is " + i;
    i+=170;
    document.getElementById("counter").innerHTML = text;
    if (i >= 3500) {
      clearInterval(interval);
    }
  }, 1000); 

}

<p>Click the button see how much AirHelps market increases by every second.</p>

<button onclick="counterFunction()">See it now</button>

<p id="counter"></p>

【讨论】：

【解决方案5】：

好的，所以应该在超时函数之外声明加法器变量，因为如果不是，您将替换该值。你应该使用 setInterval

var p =0;

function counterFunction(){
setInterval(function(){ p+=170;
console.log('value of p '+p);
 }, 3000);
}

如果您不想自己动手，这里有一个不错的柜台 http://keith-wood.name/countdown.html

【讨论】：

p 的增量为 170，而不是 1。这是错误的。