JavaScript 倒计时添加开始和重置按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5362739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript countdown adding start and reset buttons
提问by jennifer
I want to use the following to make the code start only by the press of a button rather than the code starting on its own when the page loads. also adding a reset button too.
我想使用以下内容使代码仅通过按下按钮启动，而不是在页面加载时代码自行启动。还添加了一个重置按钮。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var interval;
var minutes = 5;
var seconds = 10;
window.onload = function() {
countdown('countdown');
}
function countdown(element) {
interval = setInterval(function() {
var el = document.getElementById(element);
if(seconds == 0) {
if(minutes == 0) {
alert(el.innerHTML = "countdown's over!");
clearInterval(interval);
return;
} else {
minutes--;
seconds = 60;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
seconds--;
}, 1000);
}
</script>
</head>
<body>
<div id='countdown'></div>
</body>
</html>
采纳答案by strauberry
instead of onload use this
而不是 onload 使用这个
<input type="button" onclick="countdown('countdown');" value="Start" />
for reset, use this
重置，使用这个
<input type="button" onclick="minutes=5;seconds=10;" value="Reset" />
回答by jbrookover
The code that triggers the countdown is here:
触发倒计时的代码在这里：
window.onload = function() {
countdown('countdown');
}
instead, you can erase that and inline a button in the content that triggers the countdown with an onclick behavior:
相反，您可以删除它并在内容中内联一个按钮，该按钮通过点击行为触发倒计时：
<a href="javascript:void(0);" onclick="countdown('countdown')">Click Me to Start</a>
The timer is stored in your
计时器存储在您的
var interval;
To stop it, you can put in another button that calls clearInterval(interval):
要停止它，您可以放入另一个调用 clearInterval(interval) 的按钮：
<a href="javascript:void(0);" onclick="clearInterval(interval)">Click Me to Stop</a>
To reset, do what the others suggested and store a new value in the minutes, seconds :)
要重置，请执行其他人的建议并在分钟、秒内存储一个新值:)
回答by Teneff
you will need the two buttons:
您将需要两个按钮：
<input type="button" value="reset" id="reset" />
<input type="button" value="start" id="start" />
and the javascript for them:
和他们的javascript：
var reset = document.getElementById('reset');
reset.onclick = function() {
minutes = 5;
seconds = 10;
clearInterval(interval);
interval = null;
}
var start = document.getElementById('start');
start.onclick = function() {
if (!interval) {
countdown('countdown');
}
}
回答by Teneff
seconds = 60;
秒 = 60;
You have to reset the seconds to 59, because otherwise you count 60 twice. One time with the 0 and one time with the 60.
您必须将秒数重置为 59，否则您会数 60 两次。一次用 0，一次用 60。
