添加开始和重置按钮的JavaScript倒计时_Javascript_Countdown

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

javascript

添加开始和重置按钮的JavaScript倒计时,javascript,countdown,Javascript,Countdown,我想使用下面的方法，使代码只需按下按钮即可启动，而不是在页面加载时自行启动代码。还添加了重置按钮 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> var interval; var minutes

我想使用下面的方法，使代码只需按下按钮即可启动，而不是在页面加载时自行启动代码。还添加了重置按钮

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


无标题文件
var区间；
var分钟=5；
var秒=10；
window.onload=函数（）{
倒计时（“倒计时”）；
}
函数倒计时（元素）{
间隔=设置间隔（函数（）{
var el=document.getElementById（元素）；
如果（秒==0）{
如果（分钟==0）{
警报（el.innerHTML=“倒计时结束！”）；
间隔时间；
返回；
}否则{
分钟--；
秒=60；
}
}
如果（分钟>0）{
var minute_text=minutes+（minutes>1？'minutes'：'minute'）；
}否则{
var minute_text=''；
}
var second_text=seconds>1？'seconds'：'second'；
el.innerHTML=分钟文本+''+秒+''+秒文本+''剩余文本'；
秒--；
}, 1000);
}

触发倒计时的代码如下：

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

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

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

要停止它，您可以输入另一个调用clearInterval（interval）的按钮：

若要重置，请按照其他人的建议执行，并以分钟、秒为单位存储一个新值：）

而不是onload使用此选项

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

要重置，请使用此选项

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

您需要两个按钮：

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

秒=60

你必须将秒数重置为59，否则你会数到60两次。一次使用0，一次使用60。

请查看。

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

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

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');
    }
}