gpt4 book ai didi

javascript - 创建一个计数器

转载 作者:行者123 更新时间:2023-11-30 07:58:45 26 4
gpt4 key购买 nike

我正在创建一个计数器,但我很难做到。计数器的目标是每经过一秒,数字就会增加 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(JavaScript inside HTML element attributes),这对可维护性和可读性来说很糟糕。

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

在事件监听器函数之外定义一个计数变量,然后在间隔的每次迭代中将计数变量递增 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>

关于javascript - 创建一个计数器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33376585/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com