Блог

Я хочу заморозить свой таймер в 00: 00: 00: 00, когда таймер заканчивается, как это сделать? Это было бы очень ценно.

Спасибо

вот мой код,

 // set the date we're counting down to
var target_date = new Date("Jul 3, 2014").getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdown = document.getElementById("countdown");

// update the tag with id "countdown" every 1 second
setInterval(function () {

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    // format countdown string   set tag value
    countdown.innerHTML = days   "d, "   hours   "h, "
      minutes   "m, "   seconds   "s";  

}, 1000);
  

HTML

 <span id="countdown"></span>
  

Поскольку вам больше не понадобится интервал, вы можете заменить:

 setInterval(function () {
  

С:

 var myInterval = setInterval(function () {
  

Затем, после:

 var seconds_left = (target_date - current_date) / 1000;
  

Вставить:

 if(seconds_left <= 0){
    seconds_left = 0;
    clearInterval(myInterval);
}
  

Это очищает интервал, когда таймер достигает 0 секунд, и гарантирует, что код отображает 0 ‘s должным образом.

Итак, тогда это будет ваш код:

 var target_date = new Date("Jul 3, 2014").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");

var myInterval = setInterval(function () {
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    if(seconds_left <= 0){
        seconds_left = 0;
        clearInterval(myInterval);
    }

    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    countdown.innerHTML = days   "d, "   hours   "h, "
      minutes   "m, "   seconds   "s";  
}, 1000);
  

Добавьте простое IF в конец вашей функции:

     // format countdown string   set tag value
    if(days > 0 || hours > 0 || minutes > 0 || seconds > 0)
        countdown.innerHTML = days   "d, "   hours   "h, "
      minutes   "m, "   seconds   "s"; 

    else
       countdown.innerHTML = 0   "d, "   0   "h, "
      0   "m, "   0   "s";  
  

Прежде чем записывать фактическое время в свой div, вы должны сначала проверить, не больше ли одно или несколько значений 0

Таким образом, ваш код будет выглядеть:

 // set the date we're counting down to
var target_date = new Date("Jul 3, 2014").getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdown = document.getElementById("countdown");

// update the tag with id "countdown" every 1 second
setInterval(function () {

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    // format countdown string   set tag value
    if(days > 0 || hours > 0 || minutes > 0 || seconds > 0)
        countdown.innerHTML = days   "d, "   hours   "h, "
      minutes   "m, "   seconds   "s"; 

    else
       countdown.innerHTML = 0   "d, "   0   "h, "
      0   "m, "   0   "s";  

}, 1000);
  

Здесь работает JSFiddle