将此倒数计时器设置为特定时间

时间:2017-08-25 03:28:28

标签: javascript timer countdown countdowntimer

我有一个日期倒数计时器的Javascript代码。我想在网上商店订购流程中使用此代码。但是,我不想每天手动编辑日期。我希望计时器每天计算到相同的目标时间。

注意:负责的变量是:截止日期

function updateTimer(deadline){
      var time = deadline - new Date();
      return {
        'days': Math.floor( time/(1000*60*60*24) ),
        'hours': Math.floor( (time/(1000*60*60)) % 24 ),
        'minutes': Math.floor( (time/1000/60) % 60 ),
        'seconds': Math.floor( (time/1000) % 60 ),
        'total' : time
      };
    }


    function animateClock(span){
      span.className = "turn";
      setTimeout(function(){
        span.className = "";
      },700);
    }

    function startTimer(id, deadline){
      var timerInterval = setInterval(function(){
        var clock = document.getElementById(id);
        var timer = updateTimer(deadline);

        clock.innerHTML = '<span>' + timer.days + '</span>'
                        + '<span>' + timer.hours + '</span>'
                        + '<span>' + timer.minutes + '</span>'
                        + '<span>' + timer.seconds + '</span>';

        //animations
        var spans = clock.getElementsByTagName("span");
        animateClock(spans[3]);
        if(timer.seconds == 59) animateClock(spans[2]);
        if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]);
        if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]);

        //check for end of timer
        if(timer.total < 1){
          clearInterval(timerInterval);
          clock.innerHTML = '<span>0</span><span>0</span><span>0</span><span>0</span>';
        }


      }, 1000);
    }


    window.onload = function(){
      var deadline = new Date("august 26, 2017 17:15:00");
      startTimer("clock", deadline);
    };

0 个答案:

没有答案