Question

我正在创建一个计数器，而且我很难做到。该计数器的目标是，无论如何，一个数字将增加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>

关于如何制作这个以及我的代码有什么问题的任何想法？

Answer 1

不要使用内联JavaScript（HTML元素属性中的JavaScript），这对可维护性和可读性来说太可怕了。

你似乎对超时，间隔和循环如何工作有误解，你想要的是一个间隔。

在事件侦听器函数之外定义一个count变量，然后在每个间隔迭代中将count变量增加1并将该数字乘以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>

Answer 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);
}

Answer 3

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

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

Answer 4

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

var p =0;

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

如果你不想自己在这里滚动是一个很好的反击 http://keith-wood.name/countdown.html

Answer 5

您的代码存在一些问题。除其他外：

您的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 个答案: