如何在 table 中为开始时间和结束时间之间的剩余时间创建实时倒计时效果？

Question

在问这个问题之前我已经上网搜索过了。但我从未在 Whosebug 中发现任何重复的问题或答案。

假设我有一个开始时间

5:00 AM

那我有一个结束时间

6:15 AM

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

01:14:01

（上面的意思是，在倒计时到达结束时间值之前只剩下 1 小时 14 分钟）该输出将写入 [=30= 中每一行数据的内部之一]...table行无限制

例如

<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($) {

   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元素obj，而不是Dom元素的数组。
参数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)
    }

那么应该可以了。

更新三

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

更新二

回答问题：

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:00AM startTime:11:00PM，则假设endTime表示明天6:00AM，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>

如何在 table 中为开始时间和结束时间之间的剩余时间创建实时倒计时效果？

how to create a realtime countdown effect to the time left between a start and end time inside a table?

javascript

jquery

countdown