使用Javascript的倒计时计时器(每周重复)

以下是我用来创建每周重复倒计时计时器的代码。它运行良好，但我想扩展以下内容：

如何在一个页面上两次使用此代码而不发生冲突？当前，复制所有元素并调整"；"到期"；没有工作我希望这显示两个不同到期日的单独输出日期。
输出格式如下：小时、分钟和秒。怎么可能只显示最相关的信息？例如，如果还剩10小时12分10秒时，它将显示：10仅限小时(不包括分钟和秒(。同样，如果有00小时00分10秒后，它将显示：10秒(不包括分钟和小时(。同样的情况持续几分钟(不包括小时和秒(。

如有任何见解，我们将不胜感激。

重复倒计时定时器Javascript

<script>
var curday;
var secTime;
var ticker;

function getSeconds() {
var nowDate = new Date();
var dy = 1 ; //Sunday through Saturday, 0 to 6
var countertime = new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate(),21,0,0); //20 out of 24 hours = 8pm

var curtime = nowDate.getTime(); //current time
var atime = countertime.getTime(); //countdown time
var diff = parseInt((atime - curtime)/1000);
if (diff > 0) { curday = dy - nowDate.getDay() }
else { curday = dy - nowDate.getDay() -1 } //after countdown time
if (curday < 0) { curday += 7; } //already after countdown time, switch to next week
if (diff <= 0) { diff += (86400 * 7) }
startTimer (diff);
}

function startTimer(secs) {
secTime = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); //initial count display
}

function tick() {
var secs = secTime;
if (secs>0) {
secTime--;
}
else {
clearInterval(ticker);
getSeconds(); //start over
}

var days = Math.floor(secs/86400);
secs %= 86400;
var hours= Math.floor(secs/3600);
secs %= 3600;
var mins = Math.floor(secs/60);
secs %= 60;

//update the time display
document.getElementById("days").innerHTML = curday;
document.getElementById("hours").innerHTML = ((hours < 10 ) ? "0" : "" ) + hours;
document.getElementById("minutes").innerHTML = ( (mins < 10) ? "0" : "" ) + mins;
document.getElementById("seconds").innerHTML = ( (secs < 10) ? "0" : "" ) + secs;
}
</script>

调用getSeconds((函数以在正文加载的情况下启动计时器

<body onload="getSeconds();">

</body>

计时器显示HTML

<h6>Live in <span class="days" id="days"></span><span class="smalltext"> days,</span>
<span class="hours" id="hours"></span><span class="smalltext"> hours,</span>
<span class="minutes" id="minutes"></span><span class="smalltext"> minutes</span>
</h6>

你可以像这个一样简单地完成

//create a javascript timer function
function timerCountDOwn(date, id) {
const el = document.getElementById(id)
if (!el) return
let countDownDate = new Date(date).getTime()
const timer = setInterval(function () {
const now = new Date().getTime(),
distance = countDownDate - now,
days = Math.floor(distance / (1000 * 60 * 60 * 24)),
hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
seconds = Math.floor((distance % (1000 * 60)) / 1000),
//Format your output here
output = `<span class="days">${days}D</span> <span class="hours">${hours}H</span> <span class="minutes">${minutes}M</span> <span class="seconds">${seconds}S</span>`
el.innerHTML = output
if (distance < 0) {
clearInterval(timer)
el.innerHTML = 'EXPIRED'
}
}, 1000)
}
// then you can use it on multiple element in a single page
timerCountDOwn('Jan 5, 2023 00:00:00', 'timer1')
timerCountDOwn('Aug 25, 2022 00:00:00', 'timer2')
timerCountDOwn('Oct 30, 2022 15:22:54', 'timer3')

.timer > span {
display: inline-block;
background: #db0808;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
}

<div id="timer1" class="timer">...</div>
<div id="timer2" class="timer">...</div>
<div id="timer3" class="timer">...</div>

相关内容

最新更新

热门标签：