Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/465.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/wordpress/11.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何防止JavaScript计时器在达到零和页面重新加载后继续倒计时_Javascript_Wordpress_Timer - Fatal编程技术网

如何防止JavaScript计时器在达到零和页面重新加载后继续倒计时

如何防止JavaScript计时器在达到零和页面重新加载后继续倒计时,javascript,wordpress,timer,Javascript,Wordpress,Timer,我知道这样的问题已经被问过很多次了,但我就是不知道如何使用这些解决方案来解决我的问题。因此,我的WordPress页面上有一个JS定时器,它工作得非常好,直到倒数最后达到零——它确实在零处停止,但一旦页面重新加载,它就会继续进入负值。这是我的密码: function getTimeRemaining(endtime) { var timeDiff = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.f

我知道这样的问题已经被问过很多次了,但我就是不知道如何使用这些解决方案来解决我的问题。因此,我的WordPress页面上有一个JS定时器,它工作得非常好,直到倒数最后达到零——它确实在零处停止,但一旦页面重新加载,它就会继续进入负值。这是我的密码:

function getTimeRemaining(endtime) {

  var timeDiff = Date.parse(endtime) - Date.parse(new Date());


  var seconds = Math.floor( (timeDiff/1000) % 60 );
  var minutes = Math.floor( (timeDiff/1000/60) % 60 );
  var hours = Math.floor( (timeDiff/(1000*60*60)) % 24 );
  var days = Math.floor( timeDiff/(1000*60*60*24) );

  return {
    'total': timeDiff,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysElement= clock.querySelector('.timer__part-days .timer__value');
  var hoursElement = clock.querySelector('.timer__part-hours .timer__value');
  var minutesElement = clock.querySelector('.timer__part-minutes .timer__value');
  var secondsElement = clock.querySelector('.timer__part-seconds .timer__value');

  /**
  * Update the values in HTML
   */
  function updateClock() {
    var currentDiff = getTimeRemaining(endtime);

    daysElement.innerHTML = currentDiff.days;
    hoursElement.innerHTML = ('0' + currentDiff.hours).slice(-2);
    minutesElement.innerHTML = ('0' + currentDiff.minutes).slice(-2);
    secondsElement.innerHTML = ('0' + currentDiff.seconds).slice(-2);

    if (currentDiff.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);

}
if ( document.getElementById('timer').getAttribute('data-deadline') ) {
  var deadline = document.getElementById('timer').getAttribute('data-deadline');
  initializeClock('timer', deadline);
}
它与这一行代码有关:

var deadline = document.getElementById('timer').getAttribute('data-deadline')
我尝试通过多种方式检查数据属性的存在: 使用hasatribute等简单地检查document.getElementById('timer').getAttribute('data-deadline')是否存在,但这些都不起作用并返回其他错误(主要是指我正在检查的元素未定义);我花了很多时间研究这个问题,但我仍然不知道如何解决这个问题,尽管我确信它比我想象的要简单

提前谢谢

var deadline = document.getElementById('timer').getAttribute('data-deadline')