Javascript 如何向我的计数器添加额外时间？
我正试图建立一个倒计时时钟，从一个日期到下一个日期。例如，从万圣节倒计时到感恩节。当倒计时为零时，我希望计数器重新启动并倒计时到下一个假日 我尝试将事件分开，并以不同的方式标记它们，以独立地针对它们。任何想法都会很好，这让我陷入困境Javascript 如何向我的计数器添加额外时间？,javascript,html,Javascript,Html,我正试图建立一个倒计时时钟，从一个日期到下一个日期。例如，从万圣节倒计时到感恩节。当倒计时为零时，我希望计数器重新启动并倒计时到下一个假日 我尝试将事件分开，并以不同的方式标记它们，以独立地针对它们。任何想法都会很好，这让我陷入困境 <div class="container"> <p id="timer"> <span id="timer-days"></span> <span id="timer-hours"&
<div class="container">
<p id="timer">
<span id="timer-days"></span>
<span id="timer-hours"></span>
<span id="timer-minutes"></span>
<span id="timer-seconds"></span>
</p>
</div>
<script>
var holidazeEnd=new Date("Jun, 9 2019 18:19:00").getTime();
var holidazeEnd1=new Date("Jun, 9 2019 18:20:00").getTime();
var timer= setInterval(function(){
let now=new Date().getTime();
let t=holidazeEnd - now;
if (t >= 0)
{
let days = Math.floor(t / (1000 * 60 * 60 * 24));
let hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let mins = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
let secs = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("timer-days").innerHTML=days+"<span class= 'label'> Days</span>";
document.getElementById("timer-hours").innerHTML=("0"+hours).slice(-2)+"<span class= 'label'> Hours</span>";
document.getElementById("timer-minutes").innerHTML=("0"+mins).slice(-2)+"<span class= 'label'> Minutes</span>";
document.getElementById("timer-seconds").innerHTML=("0"+secs).slice(-2)+"<span class= 'label'> Seconds</span>";
}
else{
document.getElementById("timer").innerHtml=("Happy Independence Day!");}
},1000)
//---------------------------------------------//
var timer1= setInterval(function(){
let now=new Date().getTime();
let t=holidazeEnd1 - now;
if (t >= 0) {
let days1 = Math.floor(t / (1000 * 60 * 60 * 24));
let hours1 = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let mins1 = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
let secs1 = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("timer-days").innerHTML=days1+"<span class= 'label'> Days</span>";
document.getElementById("timer-hours").innerHTML=("0"+hours1).slice(-2)+"<span class= 'label'> Hours</span>";
document.getElementById("timer-minutes").innerHTML=("0"+mins1).slice(-2)+"<span class= 'label'> Minutes</span>";
document.getElementById("timer-seconds").innerHTML=("0"+secs1).slice(-2)+"<span class= 'label'> Seconds</span>";
}
else
document.getElementById("timer1").innerHtml="Merry Xmas!";}
,1000);
countdown(holidazeEnd,timer);
countdown(holidazeEnd1,timer1)
使用一个setInterval和一个假日数组怎么样
const holidays = [
{
running: "Independence Day",
complete: "Happy Independence Day!",
time: "July 4 2019"
},
{
running: "Christmas",
complete: "Merry Xmas!",
time: "Dec 10 2019"
}
];
//Get the next holiday index
const nextHolidayIndex = () => holidays.reduce((prevResult,current, i) => {
const timeDif = Date.parse(current.time) - Date.now();
if(timeDif < 0)
return prevResult;
if(prevResult.index == -1 || timeDif < prevResult.diff) return {
index : i,
diff: timeDif
};
return prevResult;
}, {index : -1, diff: 0}).index;
const initializeClock = (id, nextHoliday) => {
const clock = document.getElementById(id);
const message = clock.querySelector('.message');
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
let interval
function updateClock() {
const t = getTimeRemaining(nextHoliday.time);
daysSpan.innerHTML = t.days.toString();
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(interval);
message.innerHTML = nextHoliday.complete
}
}
message.innerHTML = `${nextHoliday.running}`
updateClock();
interval = setInterval(updateClock, 1000);
}
const next = nextHolidayIndex()
if(next != -1){
initializeClock('timer', holidays[next]);
}
我认为这个例子围绕着这个问题： -您可以添加任意数量的日期， -在进入下一个倒计时之前，请调整演示文稿的结束日期 我做一些改变是为了美观 //设置所有需要的日期，无需订购 康斯特假日=[ {dat:'July，3yyyyy 23:59:59'，end:'July，4yyyyy 23:59:59'，msg:'Happy Independence Day！'，bef:'Independence Day'，b颜色：'39ccc'} ，{dat:'Dec，24yyyyyy 23:59:59'，end:'Dec，26yyyyy 12:00:00'，msg:'xmeas！'，bef:'Xmas'，b颜色：'2ECC40'} ，{dat:'Oct，31yyyyy 17:59:59'，end:'Nov，1yyyy 06:00:00'，msg:'Happy Halloween！'，bef:'Halloween'，b颜色：'F012BE'} ，{dat:'Dec，31yyyy 23:59:59'，end:'Jan，1Y+1Y 01:00:00'，msg:'Happy New Year！'，bef:'New Year'，b颜色：'FFDC00'} ]; //请注意，对于每年重复的事件，使用“yyy”表示“任何一年”，使用“Y+1Y”表示“任何次年”。 //实际年份值正常，但旧事件将被忽略 //颜色在这里，例如，你可以通过在背景中放置图片来禁用它或改变想法， //做 每个物种的倒计时相同 //一切就绪： const BODY_color='554a63'//背景的标准颜色 ，timer_on=document.querySelector'timer-on' ，timer_off=document.querySelector'timer-off' ，curDT=document.getElementById'currentDateTime' ，tCountDown=document.queryselectoral'countdown div span' ，xDays=0 ，xHours=2 ，xMins=4 ，xSecs=6 ，t_msg=document.querySelector'timer-on h2' ，H_message=document.querySelector'timer-off h1' ，一秒=1000 ，一分钟=一秒*60 ，一小时=一分钟*60 ，一天=一小时*24 ，Option_DT={工作日：'long'，月：'short'，日：'numeric'，年：'numeric'，小时：'2位'，分钟：'2位'，秒：'2位'} ，Intl_F_DT=新的Intl.DateTimeFormat'en-US'，选项 ; /*用于设置倒计时目标的搜索功能 do：将接口设置为更正最近的倒计时 即使是在活动结束前的一段时间 返回：js对象 开始：事件的时间目标 结束：事件结束的时间目标 完成：根据倒计时设置为false的布尔值未完成 B颜色：在结束期间为背景绘制颜色值 */ 函数SETNEXTHOLIDAYTAYTARGET { 让我们现在=新的日期 ，nowTime=now.getTime ，thisYear=now.getFullYear ，最接近=一天*365///从最接近日期开始 ，target=null ; //默认显示 类列表上的计时器。删除“节点显示” 计时器关闭。类列表。添加“节点显示” document.body.style.backgroundColor=主体颜色； holidays.Foreach=>//在“holidays”中搜索最近日期的循环 { 让s_date=H.dat.替换'YYYY'，thiswear//将'YYYY'字符串更改为当前年份值 ，e_date=H.end。替换“yyy”，今年。替换“Y+1Y”，今年+1 ，t_date=新日期_date//目标日期 ，z_date=新日期e_date//目标日期结束 ; 如果目标日期和结束日期早于今天，则将其设置为明年 { s_date=H.dat.替换“YYYY”，今年+1 e_date=H.end.替换“yyy”，今年+1.替换“Y+1Y”，今年+2 t\u日期=新日期\u日期 z_日期=新日期E_日期 } 让t_datesDiff=t_date.getTime-nowTime ，z_datesDiff=z_date.getTime-nowTime 如果最近>t_datesDiff&&t_datesDiff>0//如果它比已经看到的日期更近 { 最近的=t_datesDiff t_msg.textContent=H.bef H_message.textContent=H.msg target={start:t_date.getTime，end:z_date.getTime，complete:false，Bcolor:H.Bcolor} } 如果最近时间>z_datesDiff&&z_datesDiff>0//倒计时期内的情况 { 最近的=z_日期敌夫 t_msg.textContent=H.bef H_message.textContent=H.msg target={start:z_date.getTime，end:z_date.getTime，complete:true，Bcolor:H.Bcolor} } } if target.complete//if在倒计时期间内 { 计时器打开。类列表。添加“节点显示” 计时器关闭。类列表。删除“节点显示” document.body.style.backgroundColor=target.Bcolor； } 返回目标 } //****初始化**** var holidazend=SetNextHolidayTarget //第一次试验证明---------------------------------- 如果为true//则设置为false以删除此测试 { 让我们现在=新的日期 ，开始=新日期 ，结束=新日期 ; //默认显示 类列表上的计时器。删除“节点显示” 计时器关闭。类列表。添加“节点显示” document.body.style.backgroundColor=主体颜色； start.setTimenow.getTime+1秒*20； ending.setTimestart.getTime+1秒*15； t_msg.textContent='测试到20秒' H_message.textContent='happy test！15s' Holidazend={开始、结束、完成：false，b颜色：'orange'} } // ===================================================================================== //定时器间隔// // - - - - - - - - // var timerInterval=setIntervalfunction { 让我们现在=新的日期 ，t=holidazend.start-now.getTime ; curDT.textContent=Intl\u F\u DT.formatnow//show date time右上角 如果t>=0 { 如果！Holidazend.完成 { t计数[xDays].textContent=Math.floort/一天； t计数[xHours].textContent='0'+Math.floort%one_Day/one_Hour.slice-2； t计数[xMins].textContent='0'+Math.floort%one_Hour/one_Min.slice-2； t计数[xSecs].textContent='0'+Math.floort%one_Min/one_Sec.slice-2； } //否则{无事可做} } 否则，时间就过去了！ { 如果holidazend.complete//“holiday”消息经过的时间 { holidazeEnd=SetNextHolidayTarget//在“假日”列表中搜索下一个假日 } else//显示“假日”消息 { 计时器打开。类列表。添加“节点显示” 计时器关闭 t、 删除“节点显示” holidazend.complete=true； holidazend.start=holidazend.end document.body.style.backgroundColor=holidazend.b颜色 } } }, 1000; * { 框大小：边框框； 填充：0； 保证金：0； } 身体{ 背景色：554a63； 字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线； } 当前日期时间{ 文本对齐：右对齐； 填充：.2em 1em 0； 颜色：白色； 字体重量：较轻； 字体拉伸：展开 } .noDisplay{ 显示：无！重要 } .计时器{ 位置：绝对位置； 最高：50%； 左：0； 显示：块； 宽度：100%； 转化：translateY-50%； } .计时器h1{ 文本对齐：居中； 字号：4em； 字体大小：粗体； 颜色：白色； 背景色：rgba96、87、151、0.315； 填充：.8em 0； } .计时器h2{ 文本对齐：居中； 填充：.3em0； } 倒计时{ 显示：表格； 保证金：0自动； 填充：1em 0； 背景色：rgba96、87、151、0.315； 最小宽度：26em； } 倒数师{ 显示：块； 浮动：左； 身高：5公分； 宽度：6em； 右边框：1px纯色灰色； } 倒计时组：第一个孩子{ 宽度：8em； } 倒数师：最后一个孩子{ 边界权：无； } 倒计时分区跨度{ 显示：内联块； 宽度：100%； 文本对齐：居中； 颜色：白色 } 倒计时分区跨度：第一个孩子{ 字号：3em； } 倒计时div span:最后一个孩子{ 字体大小：.8em； 填料：1米。2米； } .. .天 .小时 分钟 .秒 !
请解释您的问题是什么。问题是计时器达到0后没有重新启动。我希望计数器重新启动并倒计时到下一个假日。新日期2019年6月9日18:19:00不是个好主意。new Date2019,5,9,18,19,0更受欢迎。您的问题是启动两个计时器，它们或多或少同时启动并写入相同的元素。您需要一种类似于filipe建议的方法，即您有一个计时器，它也使用一组日期来倒计时。一旦完成了一个日期，它就可以在下一个日期开始。@我在回答中做了一些更改，甚至添加了一些功能，我希望你会喜欢它们。它只在2019年有效，而不是2020年，而且明年全年SOP都没有要求它。json数组的生成可以考虑事件是否在过去，设置未来的第一年时间，但有些假期并不总是在每年的同一天。
<div id="timer">
<h1 class="message"></h1>
<div class="countdown">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
#timer{
text-align: center;
background: #efefef;
font-family: sans-serif;
font-weight: 100;
display: inline-flex;
flex-direction: column;
padding: 24px;
}
h1{
color: #969696;
font-weight: 100;
font-size: 40px;
margin: 0 0 15px 0;
}
#timer .countdown{
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#timer .countdown > div{
padding: 10px;
border-radius: 3px;
background: #6f7b75;
display: inline-block;
}
#timer .countdown div > span{
padding: 15px;
border-radius: 3px;
background: #03A9F4;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
const next = nextHolidayIndex()
if(next != -1){
initializeClock('timer', holidays[next]);
}