我正在建立一个电子商务网站。 我想创建一个倒计时器。
我想做的是从23:59:59开始倒计时到00:00:00。 一旦计时器在 00:00:00 结束，我想再次从 23:59:59 重新启动计时器。 所以我必须使用循环。
现在我创建了不循环的倒计时器。 开始时间为2019/06/14 00:00:00，结束时间为2019/06/17 23:59:59。 倒计时结束后，显示屏上会显示事件结束的消息。
app.js
function CountdownTimer(elm, tl, mes) {
this.initialize.apply(this, arguments);
}
CountdownTimer.prototype = {
initialize: function (elm, tl, mes) {
this.elem = document.getElementById(elm);
this.tl = tl;
this.mes = mes;
},
countDown: function () {
var timer = '';
var today = new Date();
var day = Math.floor((this.tl - today) / (24 * 60 * 60 * 1000));
var hour = Math.floor((day * 24) + ((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
var min = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 1000)) % 60;
var sec = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 1000) % 60 % 60;
var milli = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 10) % 100;
var me = this;
if ((this.tl - today) > 0) {
if (hour) timer += '<span class="cdt_num">' + hour + '</span><small>hours</small>';
timer += '<span class="cdt_num">' + this.addZero(min) + '</span><small>minutes</small><span class="cdt_num">' + this.addZero(sec) + '</span><small>seconds</small><span class="cdt_num">' + this.addZero(milli) + '</span>';
this.elem.innerHTML = timer;
tid = setTimeout(function () {
me.countDown();
}, 10);
} else {
this.elem.innerHTML = this.mes;
return;
}
},
addZero: function (num) {
return ('0' + num).slice(-2);
}
}
//
function CDT() {
var myD = Date.now();
var start = new Date('2019-06-14T00:00+09:00');
var myS = start.getTime();
var end = new Date('2019-06-17T23:59+09:00');
var myE = end.getTime();
if (myS <= myD && myE >= myD) {
var text = '<span>Until the end</span>';
var tl = end;
}
else if (myS > myD) {
var text = '<span>Start</span><span>from</span>';
var tl = start;
}
else {
var text = "";
}
var timer = new CountdownTimer('cdt_date', tl, '<small>ended</small>');
timer.countDown();
target = document.getElementById("cdt_txt");
target.innerHTML = text;
}
window.onload = function () {
CDT();
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>timer</title>
</head>
<body>
<div class="cdt_wrapper">
<div class="cdt-btn">
<div class=cdt>
<span class="cdt_txt" id="cdt_txt"></span>
<br>
<span class="cdt_date" id="cdt_date"></span>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
我希望有人知道如何修复这些代码，将 DateTime 时间从 23:59:59 转换为 00:00:00 并添加循环函数。
最佳答案
我建议使用moment.js和 moment duration format ，这些使得处理日期和间隔变得更加容易。
// We can set endTime to whatever we want here (e.g. Midnight today )
// Use moment().endOf('day') to do this.
let endTime = moment().add(24, 'hours');
// Show time remaining now.
showTimeRemaining();
// Set a timer to update the displayed clock every 1000 milliseconds.
setInterval(showTimeRemaining, 1000);
function showTimeRemaining() {
let timeRemaining = moment.duration(endTime.diff(moment()));
document.getElementById("time_remain").innerHTML = "Time remaining: " + timeRemaining.format("hh:mm:ss");
if (moment() > endTime) {
resetTimer();
}
}
function resetTimer() {
console.log("Resetting timer..");
endTime = moment().add(24, 'hours');
}<h4 id="time_remain">Time remaining: </h4>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/2.3.2/moment-duration-format.js"></script>关于Javascript:如何倒计时和循环计时器，将日期时间从 23:59:59 转换为 00:00:00，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56592692/