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

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

   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>