如何制作倒数计时器到jquery或js与倒计时时间(H:i:s)

How maker countdown timer to jquery or js with countdown time(H:i:s)?

本文关键字:时间 倒计时 计时器 倒数 何制作 jquery js      更新时间:2023-09-26

美好的一天。

对不起,如果问题存在 - 我找不到答案(如果答案已经存在,请给我链接)

我有代码:

<div id="counttime">06:00:00</div> //h:i:s

我想制作一个倒数计时器,使divas的时间随着时间的推移减少1秒,并且当时间为00:00(i:s)时将执行功能函数();

决策不应该是第三方插件,而应该是纯js或jquery。

我开始制作脚本,但不知道下一步如何制作...

var start = $('#counttime').html();
var CountArrTime = (start.split(':')).length;
alert(CountArrTime);
if(CountArrTime == '3'){
var h_start = CountArrTime[0]; // hours start
var m_start = CountArrTime[1]; // minutes start
var s_start = CountArrTime[2]; // secounds start
}
else if(CountArrTime == '2'){
var m_start = CountArrTime[0]; // minutes start
var s_start = CountArrTime[1]; // secounds start
}

在div counttime 中的结果(时间结束时)应为 00:00(分钟:secounds);

如何在我的例子中倒计时小时、分钟、秒?

这是我

的看法。

注意大小,如果你离开并回来,它实际上可以正确保持时间

现场演示

function pad(num) {
  return num<10?"0"+num:num;
}
$(function() {
  var tCont = $('#counttime');
  var timer = tCont.html().split(':');
  if (timer.length === 2) timer.unshift(0);
  var endMilli= timer[0]*60*60*1000;
  endMilli += timer[1]*60*1000
  endMilli += timer[2]*1000;
  if(endMilli > 0) {
    var endTime = new Date(Date.now()+endMilli);   
    var tId = setInterval(function() {
      var diff = endTime.getTime()-Date.now();
      if (diff<=0) {
        tCont.html("00:00:00");
        clearInterval(tId);
      }
      else {
        var d = new Date(diff);
        hh = pad(d.getUTCHours()); 
        mm = pad(d.getMinutes());
        ss = pad(d.getSeconds());
        tCont.html(""+hh+":"+mm+":"+ss);
      }
    },300);      
  }
});

感谢您对链接的帮助。

回答我的问题:

用于测试的 JSFIDLE

var timer = $('#counttime').html();
timer = timer.split(':');
if(timer.length == 3){
var hours = timer[0];
var minutes = timer[1];
var seconds = timer[2];
}
else if(timer.length == 2){
var hours = 0;
var minutes = timer[0];
var seconds = timer[1];
}
if(hours > 0 || minutes > 0 || seconds > 0){
setInterval(function() {
seconds -= 1;

if (seconds < 0 && minutes > 0 && hours > 0) {
    minutes -= 1;
    seconds = 59;
}
else if (seconds < 0 && minutes == 0 && hours > 0) {
    hours -= 1;
    minutes = 59;
    seconds = 59;
}
else if (seconds < 0 && minutes > 0 && hours == 0) {
    hours = 0;
    minutes -= 1;
    seconds = 59;
}
if(hours > 0 && hours < 10 && ((hours+'').length != 2)) hours = '0' + hours;
if ((minutes < 10) && ((minutes+'').length < 2)) minutes = '0' + minutes;
if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;
   if(hours > 0){hoursN = hours + ':';}else{hoursN = '';}
    $('#counttime').html(hoursN + minutes + ':' + seconds);
}, 1000);
}