如何创建一个实时倒计时效果的时间之间的开始和结束之间的表

Question

在问这个问题之前，我已经在互联网上搜索过了。但我从未在斯塔克夫弗洛发现任何重复的问题或答案。

假设我有一个的开始时间

5:00 AM

然后我有一个结束时间

6:15 AM

给定上面的开始和结束时间，如何对开始和结束之间的剩余时间进行倒计时。我想要的输出像

01:14:01

(上面的意思是，距离倒计时达到结束时间值只剩下1小时14分钟了(该输出将写入表中每行数据的内部。。。表格的行是不受限制的

例如

<table>
<tr>
<td>blhblah</td>
<td>THE OUTPUT GOES HERE</td>
<td>start time</td>
<td>end time</td>
</tr>
<tr>
<td>blhblah</td>
<td>THE OUTPUT GOES HERE</td>
<td>start time</td>
<td>end time</td>
</tr>
<tr>
<td>blhblah</td>
<td>THE OUTPUT GOES HERE</td>
<td>start time</td>
<td>end time</td>
</tr>
</table>

我获取每行开始时间和结束时间的代码如下

$('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);
});

Answer 1

更新VII

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):的参数

1. 参数elem应该只引用一个Dom元素obj，而不是Dom元素的数组。

2. 参数startTime和endTime应该是字符串，并且必须像："10:45 PM"、"10:45:00 PM"、"22:45:00"，否则会崩溃。类似"2020年4月9日10:45:00 PM"的模式也是错误的。

更新IV

这个问题就要解决了。

您的代码

$('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)
}

那么它应该会起作用。

更新III

将计时器附加到表行，您可以尝试以下代码：

更新II

回答问题：

1 March 2011只是一个临时令牌，为了创建日期对象，然后使用两个日期对象(sT，eT(来计算时间跨度。所以，日期并不重要，你可以使用任何月份和任何年份的任何日期作为象征。

如果你想使用当前日期作为令牌，那么检查下面的代码，我已经更新了。

更新I

您可以使用时间形式："下午1:00"、"下午1:00 1"、"13:00"或"13:00:01"，一切正常。

Update1:如果endTime小于startTime，例如endTime:6:00 AM startTime:11:00 PM，则假设endTime表示明天上午6:00，startTime表示今天下午11:00。

更新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>