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