html网站的倒计时时间刷新
html网站的倒计时时间刷新
提问于 2018-07-26 01:39:19
我正在设计一个网站，其中有一个倒计时计时器，但每次我刷新倒计时时间重置。知道哪里出问题了吗。
我希望它设置为36天，但它工作得很好，直到我们刷新网站，但它重新设置了刷新倒计时时间。
在我的学习过程中，如果能得到帮助，那就太好了。
我的github存储库- https://www.github.com/vivanks/hackoffproject
我的网站- https://vivanks.github.io/hackoffproject
(function ($) {
"use strict";
$.fn.extend({
countdown100: function(options) {
var defaults = {
timeZone: "",
endtimeYear: 0,
endtimeMonth: 0,
endtimeDate: 0,
endtimeHours: 0,
endtimeMinutes: 0,
endtimeSeconds: 0,
}
var options = $.extend(defaults, options);
return this.each(function() {
var obj = $(this);
var timeNow = new Date();
var tZ = options.timeZone; console.log(tZ);
var endYear = options.endtimeYear;
var endMonth = options.endtimeMonth;
var endDate = options.endtimeDate;
var endHours = options.endtimeHours;
var endMinutes = options.endtimeMinutes;
var endSeconds = options.endtimeSeconds;
if(tZ == "") {
var deadline = new Date(endYear, endMonth - 1, endDate, endHours, endMinutes, endSeconds);
}
else {
var deadline = moment.tz([endYear, endMonth - 1, endDate, endHours, endMinutes, endSeconds], tZ).format();
}
if(Date.parse(deadline) < Date.parse(timeNow)) {
var deadline = new Date(Date.parse(new Date()) + endDate * 24 * 60 * 60 * 1000 + endHours * 60 * 60 * 1000);
}
initializeClock(deadline);
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(endtime) {
var daysSpan = $(obj).find('.days');
var hoursSpan = $(obj).find('.hours');
var minutesSpan = $(obj).find('.minutes');
var secondsSpan = $(obj).find('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.html(t.days);
hoursSpan.html(('0' + t.hours).slice(-2));
minutesSpan.html(('0' + t.minutes).slice(-2));
secondsSpan.html(('0' + t.seconds).slice(-2))
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
});
}
});
})(jQuery);回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-26 01:45:37
为此，您可以使用localStorage，将值保存在那里并从那里获取值，这样即使用户刷新页面，您也能够获得值并继续计数。
你应该节省时间：
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.html(t.days);
hoursSpan.html(('0' + t.hours).slice(-2));
minutesSpan.html(('0' + t.minutes).slice(-2));
secondsSpan.html(('0' + t.seconds).slice(-2))
if (t.total <= 0) {
clearInterval(timeinterval);
}
let myTime = {
daysSpan: savedTime.days,
hoursSpan: savedTime.hours,
minutesSpan: savedTime.minutes,
secondsSpan: savedTime.seconds
}
localStorage.setItem('myTime', myTime)
}并获得节省的时间：
function initializeClock(endtime) {
let localSave= localStorage.getItem('myTime')
var daysSpan;
var hoursSpan;
var minutesSpan;
var secondsSpan;
if(localSave.myTime){
daysSpan = savedTime.days;
hoursSpan = savedTime.hours;
minutesSpan = savedTime.minutes;
secondsSpan = savedTime.seconds;
}else{
daysSpan = $(obj).find('.days');
hoursSpan = $(obj).find('.hours');
minutesSpan = $(obj).find('.minutes');
secondsSpan = $(obj).find('.seconds');
}
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.html(t.days);
hoursSpan.html(('0' + t.hours).slice(-2));
minutesSpan.html(('0' + t.minutes).slice(-2));
secondsSpan.html(('0' + t.seconds).slice(-2))
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}您可以看到如何set localStorage和get localStorage。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51524779
复制相关文章
相似问题
腾讯云开发者
