jQuery 倒计时分钟和秒答案

【问题标题】：jQuery countdown timer for minutes and secondsjQuery 倒计时分钟和秒
【发布时间】：2016-12-08 09:31:18
【问题描述】：

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

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>

【问题讨论】：

标签： javascript jquery

【解决方案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>

【讨论】：

还可以看看这里如何在javascript developer.mozilla.org/en/docs/Web/JavaScript/Reference/… 中声明变量，无需将timer2 声明为jQuery 对象。
@AJ 如果像1:30:00这样的甲酸盐也算小时该怎么办
@alkavaghela ：为您创建了一个示例小提琴jsfiddle.net/2dL6u5h5/1 .. P.S ：有更好的javascript函数可以实现这一点，但您可以参考这个，如果有任何疑问，请随时询问或有关此逻辑的问题... :)
@A.J - 感谢上面小提琴中的 cmets - 任何人都可以添加 cmets 来理解 javascript 速记吗？
其实，我在这里发现了：sitepoint.com/shorthand-javascript-techniques，if (seconds < 0) { seconds = 59 } else { seconds = seconds}

【解决方案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>

上面的 sn-p 将提供到 0:00 的倒计时。 clearInterval 函数应该在最后通过检查分钟和秒是否都包含 0 作为它们的值来调用。

【讨论】：

我们如何在剩下的时间内添加小时？假设，如果我们有 2 小时 30 分 20 秒。 02:30:20。我们如何显示倒计时？

【解决方案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>

【讨论】：

【解决方案4】：

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

你不需要对字符串使用 jQuery 换行。所以，首先解决这个问题：

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

而且，第二个你需要取出起始变量5:01，因为每次间隔迭代都会将起始值重置为5:01

【讨论】：

【解决方案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

【讨论】：

【解决方案6】：

在 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);

【讨论】：

最好也对您的解决方案进行解释。

【解决方案7】：

这是上述版本的改进版本。它也允许计算小时数，可能无限小时。例如，如果您需要展示两天而不是单独浪费展示天的空间，您可以展示 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>

【讨论】：