Обратный отсчет сбрасывается на определенное время

В настоящее время у меня есть скрипт, который имеет обратный отсчет для определенной даты, но я хочу, чтобы обратный отсчет был конкретным для таймера, поэтому, скажем, если я запустил таймер и установил таймер на 30 дней, он будет запустить в течение 30 дней, а затем снова сбросить до 30 дней и начать работу. Можно ли изменить это, чтобы сделать это?

Мой код:

    <body>

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

    <script LANGUAGE="Javascript">

    // set the date we're counting down to
    var target_date = new Date("Apr 9, 2015").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);

</script>

</body>

РЕДАКТИРОВАТЬ:

Теперь я изменил код, чтобы он выглядел так, как показано ниже, но теперь, когда я открываю веб-сайт в моем браузере, он становится пустым.

Новый код:

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

<script LANGUAGE="Javascript">

// set the date we're counting down to
var target_date = new Date("Apr 9, 2015").getTime();

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

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


if (seconds_left <= 0){
        target_date = target_date + 30 days;
    }


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

Источник

1 ответ

Решение

Я действительно советую вам воспользоваться библиотеками JavaScript, в вашем случае JS является идеальным решением, вы можете проверить их документацию и посмотреть, как вы можете легко управлять временем. В любом случае, вот решение вашего вопроса с использованием момента js.

Сначала скачайте момент js и добавьте его на свою страницу.

HTML-код

    <span id="days"> </span> 
    <span id="hours"></span>
    <span id="minutes"></span> 
    <span id="seconds"></span>

Это не может быть простым, чем это:)

JAVASCRIPT

 //create two variables for holding the date for 30 back from now using    substract

var back30Days = moment().subtract(30, 'days').format('YYYY-MM-DD H:mm:ss');
   var countDownSeconds = Math.floor(moment().diff(back30Days, 'seconds'));



 //variables holding days, hours , minutes and seconds



  var Days, Minutes, Hours, Seconds;
   // Set Interval function for performing all calculations and decrementing the countDownSeconds 

   setInterval(function () {

   // Updating Days 
   Days = pad(Math.floor(countDownSeconds / 86400), 2);
   // Updating Hours 
   Hours = pad(Math.floor((countDownSeconds - (Days * 86400)) / 3600), 2);
   // Updating Minutes
   Minutes = pad(Math.floor((countDownSeconds - (Days * 86400) - (Hours * 3600)) / 60), 2);
   // Updating Seconds
   Seconds = pad(Math.floor((countDownSeconds - (Days * 86400) - (Hours * 3600) - (Minutes * 60))), 2);

   // Updation our HTML view
   document.getElementById("days").innerHTML = Days + ' Days';
   document.getElementById("hours").innerHTML = Hours + ' Hours';
   document.getElementById("minutes").innerHTML = Minutes + ' Minutes';
   document.getElementById("seconds").innerHTML = Seconds + ' Seconds';

   // Decrement the countDownSeconds
   countDownSeconds--;

   // If we reach zero , our chrono should reset to 30 days back again, as you told
   if (countDownSeconds === 0) {
       countDownSeconds = Math.floor(moment().diff(back30Days, 'seconds'));
   }

   }, 1000);


 // Function for padding the seconds i.e limit it only to 2 digits

   function pad(num, size) {
       var s = num + "";
       while (s.length < size) s = "0" + s;
       return s;
   }

Вот jsfiddle

Источник
Другие вопросы по тегам