gpt4 book ai didi

Javascript 倒计时与用户输入

转载 作者:行者123 更新时间:2023-11-28 04:43:20 26 4
gpt4 key购买 nike

你好,我正在尝试制作一个简单的应用程序,每 1 秒将输入的数字倒数到 0。有人可以解释一下我的代码做错了什么吗?我尝试了 setTimeOut 和 countDown 函数的不同组合,但在最佳设置中,我的应用程序只能暂时显示从 input(#number) 到 0 的数字。我不知道为什么每次点击“,,start”后控制台都会被清除。

<body>


<form>
<h1>Countdown:</h1>
<h3>Set time</h3>
<input id="number" type="text">
<button id="start">Start</button>
</form>
<div id="area"><p id="text1"></p></div>
<script>
window.onload = init;
function init(){
var start = document.getElementById("start");
start.onclick = finalCountDown;
}

function finalCountDown() {setTimeout(countDown,1000);}
function countDown(){
console.log("works");
var number = document.getElementById("number");
var value = number.value;
var area = document.getElementById("text1");
for (var i = value; i>0;i--){
area.innerHTML+=i;
}
}

</script>
</body>

最佳答案

这里没有什么问题;

  1. 您需要在按钮上设置属性 type="button",否则它将尝试提交您的表单。
  2. 在 setTimeout 中,您引用 countDown函数但从不调用它。您需要写setTimeout(countDown(), 1000); .

window.onload = init;
function init(){
var start = document.getElementById("start");
start.onclick = finalCountDown;
}

function finalCountDown() {setTimeout(countDown(),1000);}
function countDown(){
console.log("works");
var number = document.getElementById("number");
var value = number.value;
var area = document.getElementById("text1");
for (var i = value; i>0;i--){
area.innerHTML+=i;
}
}
<form>
<h1>Countdown:</h1>
<h3>Set time</h3>
<input id="number" type="text">
<button type="button" id="start">Start</button>
</form>
<div id="area"><p id="text1"></p></div>

这样做会消除代码中的错误。现在您只需更改一些内容即可获得所需的结果,如下所示:

window.onload = init;
function init(){
var start = document.getElementById("start");
start.onclick = finalCountDown;
}

function finalCountDown() {setTimeout(countDown(),1000);}

function countDown(){
console.log("works");
var number = document.getElementById("number");
var value = parseInt(number.value, 10);
var area = document.getElementById("text1");
var interval = setInterval(function() {
if (value > -1) {
area.innerText = value;
value--;
} else {
clearInterval(interval);
}
}, 1000);
}
<form>
<h1>Countdown:</h1>
<h3>Set time</h3>
<input id="number" type="text">
<button type="button" id="start">Start</button>
</form>
<div id="area"><p id="text1"></p></div>

我不确定您是否对 setTimeout 在开始倒计时之前造成的 1 秒延迟感兴趣,或者这只是一个错误。我假设是后者,如果是这样,只需删除该函数及其调用即可。将其替换为倒计时。

为了回应您的评论,而不是采取 <p>元素并更新其 .innerText ,您可以替换 <p><ul> 。我会给<ul>更具上下文的<id>属性并替换 var area = ...变量引用新的 <ul> 。接下来你应该替换 area.innerText...像这样的东西:

var li = document.createElement("LI");
li.innerText = i;
ul.appendChild(li);

完整图片片段:

window.onload = init;
function init(){
var start = document.getElementById("start");
start.onclick = finalCountDown;
}

function finalCountDown() {setTimeout(countDown(),1000);}

function countDown(){
var value = parseInt(document.getElementById("number").value, 10);
var ul = document.getElementById("ul");
var interval = setInterval(function() {
if (value > -1) {
var li = document.createElement("LI");
li.innerText = value;
ul.appendChild(li);
value--;
} else {
clearInterval(interval);
}
}, 1000);
}
<form>
<h1>Countdown:</h1>
<h3>Set time</h3>
<input id="number" type="text">
<button type="button" id="start">Start</button>
</form>
<ul id="ul"></ul>

关于Javascript 倒计时与用户输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43598012/

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