Как создать эффект обратного отсчета в реальном времени до времени, оставшегося между временем начала и окончания внутри таблицы? - PullRequest
Новая
       21

Как создать эффект обратного отсчета в реальном времени до времени, оставшегося между временем начала и окончания внутри таблицы?

1 голос
/ 07 апреля 2020

У меня есть поиск по номеру rnet, прежде чем спросить об этом. Но я никогда не нашел ни повторяющегося вопроса, ни ответа в stackoverflow.

скажем, у меня есть время начала 

5:00 AM

Тогда у меня есть время окончания 

6:15 AM

время начала и окончания выше, как сделать эффект обратного отсчета до времени, оставшегося между временем начала и окончания. выходной сигнал, который я хочу, выглядит примерно так: 

01:14:01

(тот, что указан выше, означает, что до окончания времени обратного отсчета осталось всего 1 час 14 минут). Этот вывод будет записан во внутренний каждой строки данных внутри таблицы ... строка таблицы не ограничена это 

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

1 Ответ

0 голосов
/ 07 апреля 2020

Обновление 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, а не на массив Элемент Dom.

  2. параметр startTime и endTime должен быть строкой и должен иметь вид: "22:45 PM", "22:45:00 PM", "22 : 45: 00 ", иначе это будет sh. Шаблон типа «9 апреля 2020 г. 10:45:00» также неверен.

Обновление 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 просто временный токен, чтобы создать Date Obj, затем использовать две Date ob js (sT, eT) для вычисления timeSpan. Таким образом, дата не имеет значения, вы можете использовать любую дату в любом месяце и любом году в качестве токена.

Если вы хотите использовать текущую дату в качестве токена, то проверьте приведенный ниже код, который я обновил.

Обновление I

Вы можете использовать форму времени: «1:00 PM» или «13:00:01 PM» или «13:00» или «13 : 00: 01 ", все работают нормально.

Update1: если endTime меньше, чем startTime, например endTime: 6:00 AM startTime: 11:00 PM, то предположим, что endTime означает завтра 6:00 AM и startTime как сегодня 23:00.

Update2: добавить функцию остановки таймера обратного отсчета. Если обратный отсчет равен 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>
...