jQuery倒计时计时器几分钟和几秒钟

Question

我想创建一个jQuery倒数计时器，我尝试了以下代码，但它不起作用。我该怎么办？

演示： https://jsfiddle.net/tbosn210/

var interval = setInterval(function() {
    
    var timer2 = $("5:01");
    var timer = timer2.split(':');
    //by parsing integer, I avoid all extra string processing
    var minutes = parseInt(timer[0],10);
    var seconds = parseInt(timer[1],10);
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0) clearInterval(interval);
    seconds = (seconds < 0) ? 59 : seconds;
    seconds = (seconds < 10) ? '0' + seconds : seconds;
    //minutes = (minutes < 10) ?  minutes : minutes;
    $('.countdown').html(minutes + ':' + seconds);
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown"></div>

Answer 1

将您的timer2声明从setInterval函数中移出，在执行结束时为timer2分配新的时间值。

工作片段：

var timer2 = "5:01";
var interval = setInterval(function() {
  var timer = timer2.split(':');
  //by parsing integer, I avoid all extra string processing
  var minutes = parseInt(timer[0], 10);
  var seconds = parseInt(timer[1], 10);
  --seconds;
  minutes = (seconds < 0) ? --minutes : minutes;
  if (minutes < 0) clearInterval(interval);
  seconds = (seconds < 0) ? 59 : seconds;
  seconds = (seconds < 10) ? '0' + seconds : seconds;
  //minutes = (minutes < 10) ?  minutes : minutes;
  $('.countdown').html(minutes + ':' + seconds);
  timer2 = minutes + ':' + seconds;
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown"></div>

Answer 2

var timer2 = "5:01";
var interval = setInterval(function() {
  var timer = timer2.split(':');
  //by parsing integer, I avoid all extra string processing
  var minutes = parseInt(timer[0], 10);
  var seconds = parseInt(timer[1], 10);
  --seconds;
  minutes = (seconds < 0) ? --minutes : minutes;
  seconds = (seconds < 0) ? 59 : seconds;
  seconds = (seconds < 10) ? '0' + seconds : seconds;
  //minutes = (minutes < 10) ?  minutes : minutes;
  $('.countdown').html(minutes + ':' + seconds);
  if (minutes < 0) clearInterval(interval);
  //check if both minutes and seconds are 0
  if ((seconds <= 0) && (minutes <= 0)) clearInterval(interval);
  timer2 = minutes + ':' + seconds;
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown"></div>

上面的摘要将提供最高0:00的倒计时。clearInterval函数应在结束时检查分钟数和秒是否包含0作为其值。

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var minutes = 1, seconds = 59;
  jQuery(function(){
    jQuery("span.countdown").html(minutes + ":" + seconds);
    var count = setInterval(function(){ if(parseInt(minutes) < 0) { clearInterval(count); } else {jQuery("span.countdown").html(minutes + ":" + seconds); if(seconds == 0) { minutes--; if(minutes < 10) minutes = "0"+minutes; seconds = 59;} seconds--; if(seconds < 10) minutes = "0"+seconds;} }, 1000);
  })
</script>
<span class="countdown"></span>

Answer 4

var timer2 = $("5:01");
var timer = timer2.split(':');

您不需要使用jQuery包装作为字符串。因此，首先修复了此操作：

var timer2 = "5:01";
var timer = timer2.split(':');

，第二个您需要拿出启动变量5:01，因为每个间隔迭代将启动值重置为5:01

Answer 5

var timer2 = "5:01";
var interval = setInterval(function() {
  var timer = timer2.split(':');
  //by parsing integer, I avoid all extra string processing
  var minutes = parseInt(timer[0], 10);
  var seconds = parseInt(timer[1], 10);
  --seconds;
  minutes = (seconds < 0) ? --minutes : minutes;
  if (minutes < 0) clearInterval(interval);
  seconds = (seconds < 0) ? 59 : seconds;
  seconds = (seconds < 10) ? '0' + seconds : seconds;
  //minutes = (minutes < 10) ?  minutes : minutes;
  $('.countdown').html(minutes + ':' + seconds);
  timer2 = minutes + ':' + seconds;
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown"></div>

如何在OO OO中停止-1：59

Answer 6

这是上述一个改进版本。它也允许计算小时，无限小时。例如，如果您需要展示两天，而不是独立浪费空间，则可以显示72H

它还对页面上的多个计时器也有支持，每个计时器都有自己的间隔。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
var intervals = []; //prepare the intervals holder
function countdown(nr,initime,endtxt){
    var selector = ".timer";//actual class name will be .timer_123 (if nr=123)
    var timer2 = initime; //"71:10:07"; //unlimited hours
    
    intervals['countdown_'+nr] = setInterval(function() {
        var timer = timer2.split(':');
        //by parsing integer, I avoid all extra string processing
        var hours = parseInt(timer[0], 10);
        var minutes = parseInt(timer[1], 10);
        var seconds = parseInt(timer[2], 10);
        
        --seconds; //decrement secs first
        
        minutes = (seconds < 0) ? --minutes : minutes;
        hours = (minutes < 0) ? --hours : hours;
            
        if (hours < 0 && minutes < 0 && seconds < 0) {
            clearInterval(intervals['countdown_'+nr]);
            $(selector+"_"+nr).html(endtxt);
        } else {
            //console.log(selector+"_"+nr, timer, timer2);
            
            //do 59 reset here to allow detection of negative values above
            seconds = (seconds < 0) ? 59 : seconds;
            minutes = (minutes < 0) ? 59 : minutes;         
            
            //set new timer value
            timer2 = hours + ':' + minutes + ':' + seconds;
            
            //start changes for display only
            seconds = (seconds < 10) ? '0' + seconds : seconds;
            minutes = (minutes < 10) ? '0' + minutes : minutes; 
            $(selector+"_"+nr).html(hours + ':' + minutes + ':' + seconds);
            
        } 
        
    }, 1000);   
}
</script>

Timer 1: <span class='timer timer_1'></span>
<script>countdown('1','72:23:13',"timer 1 has ended");</script>
<br>
Timer 2: <span class='timer timer_2'></span>
<script>countdown('2','24:00:00',"timer 2 has ended");</script>

Answer 7

停在00:00

var timer2 = "0:05";
var interval = setInterval(function() {
    var timer = timer2.split(':');
    //by parsing integer, I avoid all extra string processing
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    console.log(minutes, seconds);
    seconds = (seconds < 0) ? 59 : seconds;
    seconds = (seconds < 10) ? '0' + seconds : seconds;
    //minutes = (minutes < 10) ?  minutes : minutes;
    if (minutes < 0) {
        clearInterval(interval);
    } else {
        $('.countdown').html(minutes + ':' + seconds);
        timer2 = minutes + ':' + seconds;
    } 
}, 1000);