Question

我正在制作一个快速约会计时器，从3分钟倒数到0，显示“转到下一个日期”消息，然后重复。

我已经能够让计时器倒计时到0，然后在我设置的间隔后重新启动，但由于某种原因它不会显示消息。我的代码如下

function countdown(element, minutes, seconds) {
    // set time for the particular countdown
    var time = minutes*60 + seconds;
    var interval = setInterval(function() {
        var el = document.getElementById(element);
        // if the time is 0 then end the counter
        if(time == 0) {
            el.innerHTML = "Move on to next date...";
            clearInterval(interval);
            setTimeout(function() {
                countdown('clock', 3, 0);
            }, 2000);
        }
        var minutes = Math.floor( time / 60 );
        if (minutes < 10) minutes = "0" + minutes;
        var seconds = time % 60;
        if (seconds < 10) seconds = "0" + seconds; 
        var text = minutes + ':' + seconds;
        el.innerHTML = text;
        time--;
    }, 1000);
}
countdown('clock', 3, 0);

Answer 1

试试这个代码，我已经为你修好了

<html>
<head>
    <Script>
    function countdown(element, minutes, seconds) {
// set time for the particular countdown
var time = minutes*60 + seconds;
var interval = setInterval(function() {
    var el = document.getElementById('element');
    // if the time is 0 then end the counter
    if(time == 0) {
        setTimeout(function() {
            el.innerHTML = "Move on to next date...";
        }, 10);


        clearInterval(interval);

        setTimeout(function() {
            countdown('clock', 0, 5);
        }, 2000);
    }
    var minutes = Math.floor( time / 60 );
    if (minutes < 10) minutes = "0" + minutes;
    var seconds = time % 60;
    if (seconds < 10) seconds = "0" + seconds; 
    var text = minutes + ':' + seconds;
    el.innerHTML = text;
    time--;
}, 1000);
}
countdown('clock', 0, 5);
    </script>
</head>

<body>
    <p id="element">elelelelel</p>
</body>

 </html>

Answer 2

在“设置文本”部分后，您将再次进入“设置时间”部分。它更新文本，但然后用“00:00”覆盖它。

您应该插入一个return语句来阻止它继续，或者将时钟部分包装在else块中。

function countdown(element, minutes, seconds) {
    // set time for the particular countdown
    var time = minutes*60 + seconds;
    var interval = setInterval(function() {
        var el = document.getElementById(element);
        // if the time is 0 then end the counter
        if (time <= 0) {
            var text = "hello";
            el.innerHTML = text;
            setTimeout(function() {
                countdown('clock', 0, 5);
            }, 2000);
            clearInterval(interval);
            return;
        }
        var minutes = Math.floor( time / 60 );
        if (minutes < 10) minutes = "0" + minutes;
        var seconds = time % 60;
        if (seconds < 10) seconds = "0" + seconds; 
        var text = minutes + ':' + seconds;
        el.innerHTML = text;
        time--;
    }, 1000);
}
countdown('clock', 0, 5);

请参阅小提琴：http://jsfiddle.net/aTDJY/

Answer 3

我通过改变

让这个工作

innerHTML至innerText

在我的例子中，时钟只是一个div。如果您使用的是文本框，则需要使用它来使用值。

这是我的完整解决方案。

<html>
<head>
<script type="text/javascript">
function countdown(element, minutes, seconds) {
    // set time for the particular countdown
    var time = minutes*60 + seconds;
    var interval = setInterval(function() {
        var el = document.getElementById(element);
        // if the time is 0 then end the counter
        if(time == 0) {
            el.innerText = "Move on to next date...";
            clearInterval(interval);
            setTimeout(function() {
                countdown('clock', 3, 0);
            }, 10);
        }
        var minutes = Math.floor( time / 60 );
        if (minutes < 10) minutes = "0" + minutes;
        var seconds = time % 60;
        if (seconds < 10) seconds = "0" + seconds; 
        var text = minutes + ':' + seconds;
        el.innerText = text;
        time--;
    }, 10);
}
countdown('clock', 3, 0);
</script>
</head>

<body>
<h1>Clock</h1>
<div id="clock"/>
</body>
</html>

Answer 4

我会这样做而不是

$(document).ready(function(){
   setInterval(UpdateTime(), 1000);
});

var interval = 3*60; // 3 minutes
function updateTime(){
   interval --;
   if(interval == 0)
   {
      $(element).val("Move on to next date...");
      var interval = 3*60;
   }
   else
   {
      $(element).html(interval + " seconds left");
   }
}

Javascript 3分钟计时器，在完成时重复，并在每个周期结束时显示消息

4 个答案: