在文本框中输入值时，在单击按钮时创建倒数计时器：Javascript
我遇到了一个问题，比如当我尝试输入一个像 30 这样的数字，然后倒数到 0，但它不起作用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script type="text/javascript">
function startTimer()
{
seconds = seconds - 1;
if (seconds <= 0)
{
seconds = 0;
}
else
{
seconds--;
}
var obj = document.getElementById("timer");
obj.display.value= seconds;
}
</script>
</head>
<body>
<form id="timer" action="#">
<p><input type="text" name="display" size="
20" /></p>
<p><input type="button" value="Start"
onclick="Id=setInterval('startTimer()', 100)" />
</form>
</script>
</body>
</html>
我认为问题出在 if else 语句中，我不确定我是否让用户输入正确。
元芳怎么了浏览 127回答 3
3回答
-
Helenr
只需在 startTimer() 开始时将“秒”分配给 obj.display.value 的当前值，并确保为秒输入一个“数字”类型和一个起始值。完成后也使用 clearInterval(Id) 停止计时器。function startTimer(){ var obj = document.getElementById("timer"); /* make sure to tell javascript that 'seconds' is Number that comes from the input box */ var seconds; seconds = Number(obj.display.value);/* Don't need this *AND* seconds-- */// seconds = seconds - 1; if (seconds <= 0) { clearInterval(Id); seconds = 0; } else { seconds--; } obj.display.value = seconds;}<!doctype html><html><head><meta charset="utf-8"><title>123</title><script type="text/javascript"></script></head><body> <form id="timer" action="#"><p><input type="number" name="display" size=" 20" value="30" /></p><!-- changed the interval from 100ms to 1000ms --><p><input type="button" value="Start" onclick="Id=setInterval('startTimer()', 1000)" /></form></script></body></html> -
慕森卡
你可以使用这样的东西：将数字修改为您想要的任何数字，如果您想要一个input控件，那么我假设您知道该怎么做，如果不让我知道。function myFunction() { var inputVal = document.getElementById('myInput').value; var seconds = inputVal, $seconds = document.querySelector('#countdown'); (function countdown() { $seconds.textContent = seconds + ' second' + (seconds == 1 ? '' : 's') if(seconds --> 0) setTimeout(countdown, 1000) })();}<input type="text" id="myInput" placeholder="Enter number..." ><button onclick="myFunction()">Start Counter</button> <span id="countdown"></span> -
拉丁的传说
<input type="number" id="inp"><div id="counter"></div><script>let input = document.getElementById('inp')let counter = document.getElementById('counter')let handleInput = e => { let num = Number(e.target.value) let _counter = num - 1 let timer = setInterval(_ => { if(!_counter) clearInterval(timer) counter.innerText = _counter _counter-- }, 1000)}input.addEventListener('input', handleInput)</script>上述逻辑适用于 1 - 9（个位数输入），如果您想输入两位数或更大的数字，可以添加去抖动
随时随地看视频慕课网APP
相关分类
JavaScript