Javascript倒计时计时器添加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");

我试图在计时器达到0时添加7天。 你能帮忙吗? 它当前达到负值,但我希望它每周二重新启动一次

另外,我找到了一些解决方案,但计时器是倒计时,页面刷新时也重置了倒计时,我不想这样

            // 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"));