JavaScript 倒计时添加开始和重置按钮答案

【问题标题】：JavaScript countdown adding start and reset buttonsJavaScript 倒计时添加开始和重置按钮
【发布时间】：2011-03-19 14:37:18
【问题描述】：

我想使用以下内容使代码仅通过按下按钮启动，而不是在页面加载时自行启动代码。还添加了一个重置按钮。

<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>

【问题讨论】：

请看jsfiddle.net/dGV4a。

标签： javascript countdown

【解决方案1】：

用这个代替onload

<input type="button" onclick="countdown('countdown');" value="Start" />

重置，使用这个

<input type="button" onclick="minutes=5;seconds=10;" value="Reset" />

【讨论】：

【解决方案2】：

触发倒计时的代码在这里：

window.onload = function() {
    countdown('countdown');
}

相反，您可以删除它并在内容中内联一个按钮，该按钮通过点击行为触发倒计时：

<a href="javascript:void(0);" onclick="countdown('countdown')">Click Me to Start</a>

计时器存储在您的

var interval;

要停止它，您可以放入另一个调用 clearInterval(interval) 的按钮：

<a href="javascript:void(0);" onclick="clearInterval(interval)">Click Me to Stop</a>

要重置，请按照其他人的建议执行并在分钟、秒内存储一个新值：)

【讨论】：

【解决方案3】：

您将需要两个按钮：

<input type="button" value="reset" id="reset" />
<input type="button" value="start" id="start" />

以及他们的 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');
    }
}

example here

【讨论】：

【解决方案4】：

秒 = 60；

您必须将秒数重置为 59，否则您会两次计算 60。一次是0，一次是60。

【讨论】：