更新七
jQuery(document).ready(function($) {
let startTime = new Date() //this line means doing timespan calculation with System Clock
let elems = $('#timerTable tr')
elems.each(function(index) {
if(index !==0)
{
let endTime = $(this).children().eq(3).text()
//$(this).children().eq(2).text(getStartTimeHours(startTime)) //delete this line
createCountDownTimer(startTime,endTime,$(this).children().eq(1))
}
});
function getStartTimeHours(d){
let ampm
let cHours
let cMinutes = d.getMinutes()
if(d.getHours()>11)
{
cHours = d.getHours()-12
ampm = "PM"
}
else
{
cHours = d.getHours()
ampm = "AM"
}
return cHours+":"+cMinutes+" "+ampm
}
function createCountDownTimer(startTime, endTime, elem)
{
//let tempSt = startTime
let tempEt = endTime
//use current Date as token
let tempDate = new Date()
let cYear = tempDate.getFullYear()
let cMonth = Number(tempDate.getMonth()+1)
let cDate = tempDate.getDate()
//use current Date as token
console.log(cYear+"-"+cMonth+"-"+cDate)
//let sT = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempSt);
let sT = startTime
let eT = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempEt);
let timeSpan
//***************************************************************************
// This section is for the situation of date acrossing, if startTime later then endTime, then assume that endTime means hour in tomorrow and startTime means hour of today.
// If you want this function, then replace this line :
timeSpan = eT.getTime()-sT.getTime()
// with follow section:
//if(eT.getTime()-sT.getTime()<0)
//{
// let newET = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempEt);
// timeSpan = (newET.getTime()-sT.getTime())+1000*60*60*24
//}
//else
//{
// timeSpan = eT.getTime()-sT.getTime()
//}
//***************************************************************************
let myVar = setInterval(countDownTimer, 1000);
function countDownTimer(){
timeSpan = timeSpan-1000
let hours = Math.floor(timeSpan /(1000*60*60))
let minutes = Math.floor((timeSpan % (1000*60*60)) / (1000*60))
let seconds = Math.floor(((timeSpan % (1000*60*60)) % (1000*60)) / 1000)
let countDownOutput = hours+":"+minutes+":"+seconds
if(timeSpan < 1000) //if countdown equal 0 second, stop timer
{
elem.text("-")
console.log("stop")
clearInterval(myVar)
}
else
{
elem.text(countDownOutput)
}
}
}
});
td {
width:150px;
text-align:left
}
th {
width:150px;
text-align:left
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table id="timerTable">
<tr>
<th>FLIGHT (No.)</th><th>REMINDING TIME</th><th>ARRIVAL</th><th>DEPARTURE</th>
</tr>
<tr>
<td>CM 106</td><td></td><td>default time</td><td>7:30 PM</td>
</tr>
<tr>
<td>SL 6204</td><td></td><td>default time</td><td>5:30 PM</td>
</tr>
<tr>
<td>KL 552</td><td></td><td>default time</td><td>2:03 PM</td>
</tr>
</table>
</div>
更新 V
如果您想在計時器停止時顯示“-”，請調整功能countDownTimer()：
function countDownTimer(){
//if(timeSpan < 2000) //if countdown equal 0 second, stop timer
//{
// console.log("stop")
// clearInterval(myVar)
//}
timeSpan = timeSpan-1000
let hours = Math.floor(timeSpan /(1000*60*60))
let minutes = Math.floor((timeSpan % (1000*60*60)) / (1000*60))
let seconds = ((timeSpan % (1000*60*60)) % (1000*60)) / 1000
let countDownOutput = hours+":"+minutes+":"+seconds
// $("#"+domID).text(countDownOutput)
//if (isNaN(countDownOutput)) {
// elem.text('-');
//} else {
// elem.text(countDownOutput);
//}
if(timeSpan < 1000) //if countdown equal 0 second, stop timer
{
elem.text('-');
console.log("stop")
clearInterval(myVar)
}
else
{
elem.text(countDownOutput);
}
}
并注意函數參數createCountDownTimer(startTime, endTime, elem)：
參數elem應該只引用一個 Dom Element obj，而不是一個 Dom Element 數組。
參數startTime和endTime應該是字符串，并且必須像：“10:45 PM”，“10:45:00 PM”，“22:45:00”，否則會崩潰。像“2020 年 4 月 9 日晚上 10:45:00”這樣的模式也是錯誤的。
更新四
解決這個問題已經很接近了。
你的代碼
$('td:nth-child(3)').each(function() {
var start_time = $.trim($(this).closest("tr").find('td:eq(7)').text());
var end_time = $.trim($(this).closest("tr").find('td:eq(8)').text());
//THE OUTPUT COUNTDOWN SHOULD BE HERE
//$(this).closest("tr").find('td:eq(6)').text(OUTPUT HERE);
// the line above shouldn't be called here, appending countdown output should place inside setInterval.
createCountDownTimer(start_time, end_time, $(this).closest("tr").find('td:eq(6)'))
//No need to pass domID, but pass domElement
});
然后需要調整函數以附加到 domElement，而不是 domID：
function createCountDownTimer(startTime, endTime, domID)
改成
function createCountDownTimer(startTime, endTime, domElement)
然后改變函數 countDownTimer() ：
function countDownTimer(){
....
....
....
//$("#"+domID).text(countDownOutput)
domElement.text(countDownOutput)
}
然后它應該工作。
更新三
將計時器附加到表格行，您可以嘗試以下代碼：
更新二
回答問題：
1 March 2011只是一個臨時令牌，為了創建 Date Obj，然后使用兩個 Date objs (sT, eT) 來計算 timeSpan。因此，日期無關緊要，您可以使用任何月份和任何年份的任何日期作為標記。
如果您想使用當前日期作為令牌，請檢查下面的代碼，我已更新。
更新一
您可以使用時間形式：“1:00 PM”或“1:00:01 PM”或“13:00”或“13:00:01”，一切正常。
Update1：如果 endTime 小于 startTime，例如 endTime: 6:00 AM startTime: 11:00 PM，則假設 endTime 表示明天 6:00 AM，startTime 表示今天 11:00 PM。
更新2：增加倒計時停止功能。當倒計時等于 0 秒時，停止計時器。
您可以嘗試以下代碼：
jQuery(document).ready(function($) {
let timeTableArray = [
{
title:"Timer 1",
start:"10:00 AM",
end:"11:00 AM"
},
{
title:"Timer 2",
start:"9:00 PM",
end:"1:00 AM"
},
{
title:"Timer 3",
start:"11:10:00 PM",
end:"11:10:05 PM"
}
]
timeTableArray.forEach((timer,index)=>{
$("#timerTable").append('<tr><td class="cell">'+timer.title+'</td><td class="cell"><span id="timer'+index+'"></span></td><td class="cell">'+timer.start+'</td><td class="cell">'+timer.end+'</td></tr>')
createCountDownTimer(timer.start, timer.end, "timer"+index)
})
function createCountDownTimer(startTime, endTime, domID)
{
let tempSt = startTime
let tempEt = endTime
//use current Date as token
let tempDate = new Date()
let cYear = tempDate.getFullYear()
let cMonth = Number(tempDate.getMonth()+1)
let cDate = tempDate.getDate()
//use current Date as token
console.log(cYear+"-"+cMonth+"-"+cDate)
let sT = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempSt);
let eT = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempEt);
let timeSpan
if(eT.getTime()-sT.getTime()<0)
{
let newET = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempEt);
timeSpan = (newET.getTime()-sT.getTime())+1000*60*60*24
//if startTime later then endTime, then assume that endTime means hour in tomorrow and startTime means hour of today.
}
else
{
timeSpan = eT.getTime()-sT.getTime()
}
let myVar = setInterval(countDownTimer, 1000);
function countDownTimer(){
if(timeSpan < 2000) //if countdown equal 0 second, stop timer
{
console.log("stop")
clearInterval(myVar)
}
timeSpan = timeSpan-1000
let hours = Math.floor(timeSpan /(1000*60*60))
let minutes = Math.floor((timeSpan % (1000*60*60)) / (1000*60))
let seconds = ((timeSpan % (1000*60*60)) % (1000*60)) / 1000
let countDownOutput = hours+":"+minutes+":"+seconds
$("#"+domID).text(countDownOutput)
}
}
});
.cell {
width:150px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table id="timerTable">
</table>
</div>
