logo标签列表

jQuery倒计时器（分钟和秒数）

javascriptjquery
19

我想创建一个 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>

7个回答
45
将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>

@AJ 如果要计算格式为 1:30:00 的小时数，该怎么做？ - alka vaghela
2
@alkavaghela：为您创建了一个示例 fiddle https://jsfiddle.net/2dL6u5h5/1/。P.S ：有更好的JavaScript函数可以实现此目的，但是您可以将其用作参考。如果对此逻辑有任何疑问或问题，请随时询问... :) - Ajay Narain Mathur
@A.J - 感谢您在上面的fiddle中的评论 - 有人可以添加注释以理解JavaScript速记吗？ - user1063287
实际上，我在这里解决了问题：https://www.sitepoint.com/shorthand-javascript-techniques，`if (seconds < 0) { seconds = 59 } else { seconds = seconds}` - user1063287
脚本的另一个问题是当时间耗尽时，它会停在-1:59，这是不正确的。因此，我们可以将条件更改为以下内容 ---> minutes = (seconds < 0 && minutes > 0) ? --minutes : minutes; if (minutes == 0 && seconds == 0) clearInterval(interval); - Chetan Vashisth
显示剩余3条评论
20

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>

The above snippet will provide a countdown up to 0:00. The clearInterval function should be called at the end by checking whether minutes and seconds both are containing 0 as their value or not.

我们如何在剩余时间中添加小时？假设我们有2小时30分钟20秒。02:30:20。我们如何显示倒计时？ - Lakhan Bisht
4

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

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

你不需要使用jQuery的wrap方法来操作字符串。 因此，首先要修复这个问题：
var timer2 = "5:01";
var timer = timer2.split(':');

其次，您需要取出开始变量5:01，因为每次间隔迭代都会将起始值重置为5:01

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

1
这是上面那个版本的改进版。它可以计算小时数，而且小时数没有限制。例如，如果您需要显示两天并且不浪费空间来单独显示天数，您可以显示72小时。
它还支持在页面上使用多个定时器，每个定时器都有自己的间隔时间。 

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

0

停在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);
最好在你的解决方案中加上一些解释。 - Kidus Tekeste
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接