Javascript倒计时计时器添加7天
我试图在计时器达到0时添加7天。 你能帮忙吗? 它当前达到负值,但我希望它每周二重新启动一次 另外,我找到了一些解决方案,但计时器是倒计时,页面刷新时也重置了倒计时,我不想这样Javascript倒计时计时器添加7天,javascript,timer,countdown,Javascript,Timer,Countdown,我试图在计时器达到0时添加7天。 你能帮忙吗? 它当前达到负值,但我希望它每周二重新启动一次 另外,我找到了一些解决方案,但计时器是倒计时,页面刷新时也重置了倒计时,我不想这样 // Countdown timer function makeTimer() { var endTime = new Date("October 18, 2020 08:00:00 EST");
// Countdown timer
function makeTimer() {
var endTime = new Date("October 18, 2020 08:00:00 EST");
var endTime = (Date.parse(endTime)) / 1000;
var now = new Date();
var now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
$("#days").html(days + '<span class="camp">Days</span>');
$("#hours").html(hours + '<span class="camp">Hours</span>');
$("#minutes").html(minutes + '<span class="camp">Minutes</span>');
$("#seconds").html(seconds + '<span class="camp">Seconds</span>');
}
setInterval(function() { makeTimer();
}, 1000);
//倒计时
函数makeTimer(){
var endTime=新日期(“2020年10月18日08:00:00东部标准”);
var endTime=(Date.parse(endTime))/1000;
var now=新日期();
var now=(Date.parse(now)/1000);
var timeLeft=endTime-now;
变量天数=数学下限(timeLeft/86400);
var小时=数学楼层((时间间隔-(天*86400))/3600);
var分钟=数学楼层((时间间隔-(天*86400)-(小时*3600))/60);
var秒=数学地板((时间间隔-(天*86400)-(小时*3600)-(分钟*60));
如果(小时<“10”){hours=“0”+小时;}
如果(分钟<“10”){minutes=“0”+分钟;}
如果(秒<“10”){seconds=“0”+秒;}
$(“#天”).html(天+天);
$(“#小时”).html(小时+小时);
$(“#分钟”).html(分钟+分钟);
$(“#秒”).html(秒+秒);
}
setInterval(函数(){makeTimer();
}, 1000);
您必须让浏览器知道您的结束时间,否则每次它都会返回到原始的硬编码值。将用户开始和结束计算所需的数据存储在服务器上,或者仅在浏览器中使用localStorage进行此操作
因此,我添加了一个名为
add7Days
的函数,并检查剩余时间是否小于0。这将在变量每次用完时增加额外的天数。
我还创建了一个对象作为一个全局变量,因为如果您运行这个程序大概需要数周的时间,那么如果您每秒重新声明变量,您将开始遇到内存泄漏问题
var countDownObject = {
'endDate': new Date('2020-10-19 23:45')
,'now': undefined
,'days': 0
,'hours': 0
,'minutes': 0
,'seconds': 0
,'timeLeft': 0
};
function countDown(){
countDownObject.now = new Date();
countDownObject.timeLeft = countDownObject.endDate - countDownObject.now;
if(timeLeft < 0) add7Days(); /* Function to change time left */
countDownObject.days = Math.floor(timeLeft / 86400);
countDownObject.hours = Math.floor((timeLeft - (days * 86400)) / 3600);
countDownObject.minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
countDownObject.seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if(hours < 10) countDownObject.hours = "0" + hours;
if(minutes < 10) countDownObject.minutes = "0" + minutes;
if(seconds < 10) countDownObject.seconds = "0" + seconds;
$("#days").html(countDownObject.days + '<span class="camp">Days</span>');
$("#hours").html(countDownObject.hours + '<span class="camp">Hours</span>');
$("#minutes").html(countDownObject.minutes + '<span class="camp">Minutes</span>');
$("#seconds").html(countDownObject.seconds + '<span class="camp">Seconds</span>');
};
function add7Days(){
countDownObject.endDate.setDate(countDownObject.endDate.getDate() + 7);
countDownObject.timeLeft = countDownObject.endDate - countDownObject.now;
};
setInterval(function(){makeTimer();}, 1000);
或者作为服务器上自己的json文件。根据特定时区(星期二上午8点,在您的情况下是东海岸时间)倒计时到一周中特定的一天和时间的另一种方法是使用第三方时间API,您可以使用XMLHttpRequest访问该API(如果您不需要支持Internet Explorer,也可以提取) 第三方时间API将为您提供一个JSON对象,其中包含GMT时间以及标准时间或夏令时的东部时间(我以纽约为例)的当前偏移量,它还将注意夏令时是否有效。这可能比根据访客的电脑时间更好,因为电脑时间可以设置为不同的时区(例如,亚利桑那州凤凰城全年使用山地标准时间) 访问第三方时间API可以让您每隔一段时间重新同步一次计时器,因此倒计时计时器不会偏离实际结束时间太远。setInterval可能会慢0.3%左右,6天内大约30分钟 XMLHttpRequest有一个onerror事件处理程序,如果主API由于某种原因处于脱机状态,则可以使用该处理程序连接到备用时间API。IE10和11支持OneError事件处理程序
//IE的padStart polyfill
if(!String.prototype.padStart){
String.prototype.padStart=函数padStart(targetLength,padString){
//如果为数字或将非数字转换为0,则为地板;
目标长度=目标长度>>0;
padString=String(padString的类型!=“未定义”?padString:”;
如果(this.length>targetLength){
返回字符串(this);
}否则{
targetLength=targetLength-此.length;
if(targetLength>padString.length){
//附加到原件,以确保我们的长度超过需要
padString+=padString.repeat(targetLength/padString.length);
}
返回padString.slice(0,targetLength)+字符串(this);
}
};
}
函数计数停机时间(endDay、endTimeStr、reachedZero){
var-oReq;
var endingTimeObj;
var-currentDateObj;
var countdownsplay=document.getElementById(“倒计时”);
var timeDisplay=document.getElementById(“时间”);
var intervalID=null;
var endTime={};
变量编号=endTimeStr.split(“,”).map(编号);
var循环计数=0;
endTime.hr=数字[0];
endTime.min=数字[1];
endTime.sec=数字[2];
endTime.ms=数字[3];
函数倒计时(){
var剩余天数;
var剩余小时数;
var remainingMin;
var剩余证券;
var delta=endingTimeObj-currentDateObj;
如果(增量=3600){
加载();
}
}
函数reqListener(){
if(this.readyState==4&&this.status==200){
//停止现有计时器-将立即创建新计时器
如果(有效期内!==null){
窗口。clearInterval(intervalID);
intervalID=null;
}
var obj=JSON.parse(this.responseText);
currentDateObj=新日期(obj.datetime);
endingTimeObj=新日期(obj.datetime);
log(“GMT:+currentDateObj.ToutString());
currentDateObj.setHours(currentDateObj.getHours()
+parseInt(对象utc_偏移量,10));
log(“ET:+currentDateObj.toutString());
//下一次倒计时结束的时间到了
//Set Object
localStorage.setItem("countDownObject", JSON.stringify(countDownObject));
//Get Object
var countDownObject = JSON.parse(localStorage.getItem("countDownObject"));