Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/370.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/HTML_Javascript_Html - Fatal编程技术网

无限循环倒计时计时器JavaScript/HTML

无限循环倒计时计时器JavaScript/HTML,javascript,html,Javascript,Html,我试图用JavaScript制作一个无限循环的倒计时计时器。我可以让倒计时按预期运行,但无法让它们在达到0/低于0时正确重置 很抱歉,我应该指定,对于第一个计时器“mcReset”,我需要将计时器达到0时的日期从最初指定的日期重置为7天 对于第二个计时器“onyReset”,我需要将计时器点击0时的日期重置为从最初指定日期算起的5天 例如,mcReset(10月14日9:28:00)将变为10月21日9:28:00,onyReset(2019年10月17日12:00:00)将变为2019年10月

我试图用JavaScript制作一个无限循环的倒计时计时器。我可以让倒计时按预期运行,但无法让它们在达到0/低于0时正确重置

很抱歉,我应该指定,对于第一个计时器“mcReset”,我需要将计时器达到0时的日期从最初指定的日期重置为7天

对于第二个计时器“onyReset”,我需要将计时器点击0时的日期重置为从最初指定日期算起的5天

例如,mcReset(10月14日9:28:00)将变为10月21日9:28:00,onyReset(2019年10月17日12:00:00)将变为2019年10月22日12:00:00,倒计时将无限循环

我对JavaScript不太熟悉,因此非常感谢您的帮助:)

代码如下:

//设置我们倒计时的日期
var mcReset=新日期(“2019年10月14日9:28:00”).getTime();
var onyReset=新日期(“2019年10月17日12:00:00”).getTime();
//每1秒更新一次倒计时
var x=setInterval(函数(){
//获取今天的日期和时间
var now=new Date().getTime();
//找出现在和倒计时日期之间的距离
var距离=mcReset-现在;
var onyDistance=onyReset-now;
//天、小时、分钟和秒的时间计算
var mcDays=数学楼层(距离/(1000*60*60*24));
var onyDays=数学楼层(距离/(1000*60*60*24));
var mcHours=数学楼层((距离%(1000*60*60*24))/(1000*60*60));
var onyHours=数学楼层((onyDistance%(1000*60*60*24))/(1000*60*60));
var mcMinutes=数学楼层((距离%(1000*60*60))/(1000*60));
var onyMinutes=数学楼层((onyDistance%(1000*60*60))/(1000*60));
var mcSeconds=数学楼层((距离%(1000*60))/1000);
变量onySeconds=数学地板((onydestance%(1000*60))/1000);
//在id=“demo”的元素中输出结果
document.getElementById(“demo”).innerHTML=mcDays+“d”+mcHours+“h”
+分钟+米+秒+秒+秒;
document.getElementById(“ony”).innerHTML=onyDays+d+onyHours+h
+分钟+米+秒+秒;
//如果倒计时结束,请重置
如果(距离<0){
//在这里做点什么?
//不确定什么
}
}, 1000);
p{
文本对齐:居中;
字体大小:60px;
边际上限:0px;
}


我对您的代码进行了一些重构

下面是一个函数,它将倒计时到一个特定的日期,完成后,它将删除该倒计时并使用新日期再次调用自己:

//Helper函数获取当前日期并在其上添加10秒
const get10SecsInFuture=()=>{
//确定我们倒计时的日期
设d=新日期();
//添加一分钟到日期
d、 设置时间(d.getTime()+1000*10);
返回d;
}
//使倒计时成为一个函数
常量倒计时=(onyReset)=>{
让countDownHandle=setInterval(()=>{
//获取今天的日期和时间
现在让我们=new Date().getTime();
//找出现在和倒计时日期之间的距离
让onyDistance=onyReset-now;
//天、小时、分钟和秒的时间计算
设onyDays=数学楼层(onydestance/(1000*60*60*24));
设onyHours=数学楼层((onyDistance%(1000*60*60*24))/(1000*60*60));
假设onyMinutes=数学楼层((onyDistance%(1000*60*60))/(1000*60));
设onySeconds=Math.floor((onydestance%(1000*60))/1000);
//在id=“demo”的元素中输出结果
document.getElementById(“ony”).innerHTML=onyDays+d+onyHours+h
+分钟+米+秒+秒;
//如果倒计时结束,请重置

如果(onydestanceSo),则将天数添加到字符串中,并使用新值更新全局变量

函数addDaysGetTime(日期,numOfDays){
var日期=新日期(日期);
date.setDate(date.getDate()+numOfDays);
返回日期。getTime()
}
var mcReset=新日期(“2019年10月14日9:28:00”).getTime();
var onyReset=新日期(“2019年10月17日12:00:00”).getTime();
日志(“之前”、mcReset、onyReset)
//如果(距离<0){
mcReset=addDaysGetTime(mcReset,7)
onyReset=addDaysGetTime(onyReset,5)
// }

console.log(“after”、mcReset、onyReset)
关键是要确保每个倒计时在更新页面的间隔函数中都有正确的目标时间戳。如果倒计时日期已经过去,请添加倒计时间隔;这样,剩余时间将无缝地跳到下一个时间戳的倒计时

有一种方法可以做到这一点:

const DAYS=24*3600*1000;
常数倒数=[{
id:“mcReset”,
时间戳:新日期(“2019年10月14日9:28:00”).getTime(),
间隔:7*天
},
{
id:“重置”,
时间戳:新日期(“2019年10月17日12:00:00”).getTime(),
间隔时间:5*天
},
{
id:“演示”,
时间戳:新日期(新日期().getTime()+5000).getTime(),
间隔时间:5000
}
];
设置间隔(()=>{
const now=new Date().getTime();
倒计时。forEach(c=>{
而(c.timestamp
p{
文本对齐:居中;
字体大小:200%;
边际上限:0px;
}


那么您的问题是什么?将其重置为什么?值还是不再运行间隔?您需要调用
clearInterval(句柄);
在您的情况下:
clearInterval(x);
W