如何为表格内开始时间和结束时间之间的剩余时间创建实时倒计时效果？

Question

在问这个之前我已经搜索了互联网。但我从未在 stackoverflow 中找到任何重复的问题或答案。

假设我有一个开始时间

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

更新七jQuery(document).ready(function($) {&nbsp; &nbsp;let startTime = new Date()&nbsp; &nbsp; &nbsp; //this line means doing timespan calculation with System Clock&nbsp;&nbsp; &nbsp;let elems = $('#timerTable tr')&nbsp; &nbsp;&nbsp; &nbsp;elems.each(function(index) {&nbsp; &nbsp; &nbsp;if(index !==0)&nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; let endTime = $(this).children().eq(3).text()&nbsp; &nbsp; &nbsp; &nbsp; //$(this).children().eq(2).text(getStartTimeHours(startTime))&nbsp; //delete this line&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; createCountDownTimer(startTime,endTime,$(this).children().eq(1))&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp;});&nbsp; &nbsp;function getStartTimeHours(d){&nbsp; &nbsp; &nbsp; &nbsp;let ampm&nbsp; &nbsp; &nbsp; &nbsp;let cHours&nbsp; &nbsp; &nbsp; &nbsp;let cMinutes = d.getMinutes()&nbsp; &nbsp; &nbsp; &nbsp;if(d.getHours()>11)&nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;cHours = d.getHours()-12&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ampm = "PM"&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;else&nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;cHours = d.getHours()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ampm = "AM"&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;return cHours+":"+cMinutes+" "+ampm&nbsp; &nbsp;}&nbsp; &nbsp;&nbsp; &nbsp;function createCountDownTimer(startTime, endTime, elem)&nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; //let tempSt = startTime&nbsp; &nbsp; &nbsp; let tempEt = endTime&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; //use current Date as token&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; let tempDate = new Date()&nbsp; &nbsp; &nbsp; let cYear = tempDate.getFullYear()&nbsp; &nbsp; &nbsp; let cMonth = Number(tempDate.getMonth()+1)&nbsp; &nbsp; &nbsp; let cDate = tempDate.getDate()&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; //use current Date as token&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; console.log(cYear+"-"+cMonth+"-"+cDate)&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; //let sT = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempSt);&nbsp; &nbsp; &nbsp; let sT = startTime&nbsp; &nbsp; &nbsp; let eT = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempEt);&nbsp; &nbsp; &nbsp; let timeSpan&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; //***************************************************************************&nbsp; &nbsp; &nbsp; // 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.&nbsp; &nbsp; &nbsp; // If you want this function, then replace this line :&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;timeSpan = eT.getTime()-sT.getTime()&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // with follow section:&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; //if(eT.getTime()-sT.getTime()<0)&nbsp; &nbsp; &nbsp; //{&nbsp; &nbsp; &nbsp; //&nbsp; &nbsp;let newET = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempEt);&nbsp; &nbsp; &nbsp; //&nbsp; &nbsp;timeSpan = (newET.getTime()-sT.getTime())+1000*60*60*24&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; //}&nbsp; &nbsp; &nbsp; //else&nbsp; &nbsp; &nbsp; //{&nbsp; &nbsp; &nbsp; //&nbsp; &nbsp;timeSpan = eT.getTime()-sT.getTime()&nbsp; &nbsp; &nbsp; //}&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; //***************************************************************************&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; let myVar = setInterval(countDownTimer, 1000);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; function countDownTimer(){&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; timeSpan = timeSpan-1000&nbsp; &nbsp; &nbsp; &nbsp; let hours = Math.floor(timeSpan /(1000*60*60))&nbsp; &nbsp; &nbsp; &nbsp; let minutes = Math.floor((timeSpan % (1000*60*60)) / (1000*60))&nbsp; &nbsp; &nbsp; &nbsp; let seconds = Math.floor(((timeSpan % (1000*60*60)) % (1000*60)) / 1000)&nbsp; &nbsp; &nbsp; &nbsp; let countDownOutput = hours+":"+minutes+":"+seconds&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if(timeSpan < 1000)&nbsp; &nbsp;//if countdown equal 0 second, stop timer&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;elem.text("-")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log("stop")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;clearInterval(myVar)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;elem.text(countDownOutput)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;}&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;});td {&nbsp;width:150px;&nbsp;text-align:left}th {&nbsp;width:150px;&nbsp;text-align:left}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>&nbsp; <table id="timerTable">&nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp;<th>FLIGHT (No.)</th><th>REMINDING TIME</th><th>ARRIVAL</th><th>DEPARTURE</th>&nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp;<td>CM 106</td><td></td><td>default time</td><td>7:30 PM</td>&nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp;<td>SL 6204</td><td></td><td>default time</td><td>5:30 PM</td>&nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp;<td>KL 552</td><td></td><td>default time</td><td>2:03 PM</td>&nbsp; &nbsp; &nbsp;</tr>&nbsp; </table></div>更新 V如果您想在计时器停止时显示“-”，请调整功能countDownTimer()：&nbsp; function countDownTimer(){&nbsp; &nbsp; &nbsp;//if(timeSpan < 2000)&nbsp; &nbsp;//if countdown equal 0 second, stop timer&nbsp; &nbsp; &nbsp;//{&nbsp; &nbsp; &nbsp;//&nbsp; &nbsp;console.log("stop")&nbsp; &nbsp; &nbsp;//&nbsp; &nbsp;clearInterval(myVar)&nbsp; &nbsp; &nbsp;//}&nbsp; &nbsp; &nbsp;timeSpan = timeSpan-1000&nbsp; &nbsp; &nbsp;let hours = Math.floor(timeSpan /(1000*60*60))&nbsp; &nbsp; &nbsp;let minutes = Math.floor((timeSpan % (1000*60*60)) / (1000*60))&nbsp; &nbsp; &nbsp;let seconds = ((timeSpan % (1000*60*60)) % (1000*60)) / 1000&nbsp; &nbsp; &nbsp;let countDownOutput = hours+":"+minutes+":"+seconds&nbsp; &nbsp; //&nbsp; $("#"+domID).text(countDownOutput)&nbsp; &nbsp; //if (isNaN(countDownOutput)) {&nbsp; &nbsp; //&nbsp; &nbsp; elem.text('-');&nbsp; &nbsp; //} else {&nbsp; &nbsp; //&nbsp; &nbsp; elem.text(countDownOutput);&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; //}&nbsp; &nbsp; if(timeSpan < 1000)&nbsp; &nbsp;//if countdown equal 0 second, stop timer&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp;elem.text('-');&nbsp; &nbsp; &nbsp; &nbsp;console.log("stop")&nbsp; &nbsp; &nbsp; &nbsp;clearInterval(myVar)&nbsp; &nbsp; }&nbsp; &nbsp; else&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; elem.text(countDownOutput);&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp;}并注意函数参数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() {&nbsp; &nbsp; var start_time = $.trim($(this).closest("tr").find('td:eq(7)').text());&nbsp; &nbsp; var end_time = $.trim($(this).closest("tr").find('td:eq(8)').text());&nbsp; &nbsp; //THE OUTPUT COUNTDOWN SHOULD BE HERE&nbsp; &nbsp; //$(this).closest("tr").find('td:eq(6)').text(OUTPUT HERE);&nbsp; &nbsp; // the line above shouldn't be called here, appending countdown output&nbsp; should place inside setInterval.&nbsp; &nbsp; createCountDownTimer(start_time, end_time, $(this).closest("tr").find('td:eq(6)'))&nbsp; &nbsp; //No need to pass domID, but pass domElement});然后需要调整函数以附加到 domElement，而不是 domID：function createCountDownTimer(startTime, endTime, domID)改成function createCountDownTimer(startTime, endTime, domElement)然后改变函数 countDownTimer() ：&nbsp; &nbsp; function countDownTimer(){&nbsp; &nbsp; ....&nbsp; &nbsp; ....&nbsp; &nbsp; ....&nbsp; &nbsp; &nbsp; &nbsp;//$("#"+domID).text(countDownOutput)&nbsp; &nbsp; &nbsp; &nbsp;domElement.text(countDownOutput)&nbsp; &nbsp; }然后它应该工作。更新三将计时器附加到表格行，您可以尝试以下代码：更新二回答问题：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($) {&nbsp; &nbsp;let timeTableArray = [&nbsp; &nbsp; &nbsp; {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title:"Timer 1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;start:"10:00 AM",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;end:"11:00 AM"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title:"Timer 2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;start:"9:00 PM",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;end:"1:00 AM"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;title:"Timer 3",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;start:"11:10:00 PM",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;end:"11:10:05 PM"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;]&nbsp; &nbsp;timeTableArray.forEach((timer,index)=>{&nbsp; &nbsp; &nbsp;$("#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>')&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;createCountDownTimer(timer.start, timer.end, "timer"+index)&nbsp; &nbsp;&nbsp; &nbsp;})&nbsp; &nbsp;&nbsp; &nbsp;function createCountDownTimer(startTime, endTime, domID)&nbsp; &nbsp;{&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; let tempSt = startTime&nbsp; &nbsp; &nbsp; let tempEt = endTime&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; //use current Date as token&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; let tempDate = new Date()&nbsp; &nbsp; &nbsp; let cYear = tempDate.getFullYear()&nbsp; &nbsp; &nbsp; let cMonth = Number(tempDate.getMonth()+1)&nbsp; &nbsp; &nbsp; let cDate = tempDate.getDate()&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; //use current Date as token&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; console.log(cYear+"-"+cMonth+"-"+cDate)&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; let sT = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempSt);&nbsp; &nbsp; &nbsp; let eT = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempEt);&nbsp; &nbsp; &nbsp; let timeSpan&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; if(eT.getTime()-sT.getTime()<0)&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;let newET = new Date(cYear+"-"+cMonth+"-"+cDate+" "+tempEt);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;timeSpan = (newET.getTime()-sT.getTime())+1000*60*60*24&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//if startTime later then endTime, then assume that endTime means hour in tomorrow and startTime means hour of today.&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;timeSpan = eT.getTime()-sT.getTime()&nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; let myVar = setInterval(countDownTimer, 1000);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; function countDownTimer(){&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if(timeSpan < 2000)&nbsp; &nbsp;//if countdown equal 0 second, stop timer&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log("stop")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;clearInterval(myVar)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; timeSpan = timeSpan-1000&nbsp; &nbsp; &nbsp; &nbsp; let hours = Math.floor(timeSpan /(1000*60*60))&nbsp; &nbsp; &nbsp; &nbsp; let minutes = Math.floor((timeSpan % (1000*60*60)) / (1000*60))&nbsp; &nbsp; &nbsp; &nbsp; let seconds = ((timeSpan % (1000*60*60)) % (1000*60)) / 1000&nbsp; &nbsp; &nbsp; &nbsp; let countDownOutput = hours+":"+minutes+":"+seconds&nbsp; &nbsp; &nbsp; &nbsp; $("#"+domID).text(countDownOutput)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;}&nbsp;&nbsp; &nbsp;});.cell {&nbsp;width:150px}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>&nbsp; <table id="timerTable">&nbsp; </table></div>