当计时器变为0时,如何执行一些代码?

时间:2014-07-24 13:26:25

标签: javascript

我有这个计时器从10分钟倒计时到0.我现在需要它做什么是警报('你已经完成')当它达到0?我尝试将if (mins == 0 alert('hi'));添加到Decrement()函数中,但没有任何内容被捕获。

<!DOCTYPE html>
<html>
<head> 

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="favicon.ico">

<title>SAGGY</title>

</head>

<body>

<script>        
    var mins = 10;  //Set the number of minutes you need
    var secs = mins * 60;
    var currentSeconds = 0;
    var currentMinutes = 0;
    setTimeout('Decrement()',1000);

    function Decrement() {
        currentMinutes = Math.floor(secs / 60);
        currentSeconds = secs % 60;
        if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
        secs--;
        document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
        if(secs !== -1) setTimeout('Decrement()',1000);
    } 

</script>

<h1 id="title"> 
  START THE TIMER
</h1>

<button onclick="Decrement()">GO!</button> 

<h2 id="timerText">######</h2>

<br/>

<textarea rows="15" cols="60" id="text">

</textarea> 

<h2 id="finish" class="finish">Copyright BibBoy &#174  2014 #ImYourMum</h2>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

您可以重复使用已有的条件:

if (secs !== -1) {
   setTimeout('Decrement()',1000);
   // or better:
   // setTimeout(Decrement, 1000);
} else {
   alert('you\'re done');
}

另请注意,您不需要使用传递给setTimeout()的字符串 - setTimeout(Decrement, 1000);也可以正常使用。

这是调整后的JSFiddle demo,因此计时器从5秒开始倒数,而不是10分钟。

我的另一个注意事项是,按照惯例,人们通常使用小写的函数名称。带有首字母的函数名通常用于表示构造函数。