gpt4 book ai didi

javascript - 在 JavaScript 中延迟倒计时

转载 作者:行者123 更新时间:2023-11-30 11:14:14 27 4
gpt4 key购买 nike

我已经开始学习 JavaScript,我正在编写一个程序,从用户那里获取一个数字,然后倒数到零,每个数字延迟一秒。

这是我的代码:

function DescreasNo(){
var MyInput = parseInt(document.getElementById('HoursOfWork').value);
var output = document.getElementById('output01');
output.innerHTML = '';
for ( var i=MyInput ; i>0 ; i--){
output.innerHTML += i +"<br>";
}
}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="StyleSheet.css" />
<script src="Script.js"></script>


<title>EyeProctect Project</title>
</head>
<body>
<h1>Eye Protect</h1>
<h4>Keep Your Eyes safe</h4>
<input type="text" id="HoursOfWork" placeholder="Enter your hours of work ...." />
<button class="start" onclick="DescreasNo()" >Let's Go!</button>
<p id="output01"></p>


</body>
</html>

我使用了 setTimeoutsetInterval,但我的问题是它只为每个数字显示零,如下所示:

0, 0, 0, 0

请帮我解决这个问题。

最佳答案

您可以将 setTimeout() 与 IIFE 一起使用:

function DescreasNo(){
var MyInput = parseInt(document.getElementById('HoursOfWork').value);
var output = document.getElementById('output01');
output.innerHTML = '';

(function loop (i) {
setTimeout(function () {
output.innerHTML += i +"<br>";
if (--i) loop(i); // call the function until end
}, 1000); // 1 second delay
})(MyInput);
}
<h1>Eye Protect</h1>
<h4>Keep Your Eyes safe</h4>
<input type="text" id="HoursOfWork" placeholder="Enter your hours of work ...." />
<button class="start" onclick="DescreasNo()" >Let's Go!</button>
<p id="output01"></p>

关于javascript - 在 JavaScript 中延迟倒计时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52306927/

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