比較給定時間和當前時間的多個倒數計時器？

Question

由於某種原因，真的很擔心這部分。

我正在創建一個計時器，可以用來跟蹤出價。我希望能夠比較兩次，並在倒計時欄中顯示差異（以分鐘和秒爲單位）。它應該比較現在的出價開始時間和時間。

也許，當它達到出價開始時，它也可能會改變，直到出價結束爲止。最終，我想在接近時間後添加背景更改，也許可以通過提示窗口設置鬧鐘。

這裏是我到目前爲止的代碼：

HTML

<table> 
<tr> 
    <td>Item Name</td> 
    <td><input id="itemNameField" placeholder="" type="text"></td> 
</tr> 
<tr> 
    <td></td> 
    </tr> 
    <tr> 
     <td>Time of Notice</td> 
     <td><input id="noticeField" type="time"></td> 
    </tr> 
</table> 


<input id="addButton" onclick="insRow()" type="button" value="Add Timer"> 
<div id="errorMessage"></div> 
<hr> 
<div id="marketTimerTableDiv"> 
    <table border="1" id="marketTimerTable"> 
     <tr> 
      <td></td> 
      <td>Item Name</td> 
      <td>Time of Notice</td> 
      <td>Bid Start</td> 
      <td>Bid End</td> 
      <td>Countdown</td> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td> 
       <div id="itembox"></div>Example Item 
      </td> 
      <td> 
       <div id="noticebox"></div>12:52 
      </td> 
      <td> 
       <div id="bidstartbox"></div>13:02 
      </td> 
      <td> 
       <div id="bidendbox"></div>13:07 
      </td> 
      <td> 
       <div id="countdownbox"></div> 
      </td> 
      <td><input id="delbutton" onclick="deleteRow(this)" type="button" value="X"></td> 
     </tr> 
    </table> 
</div> 

JAVASCRIPT

function deleteRow(row) { 
var i = row.parentNode.parentNode.rowIndex; 
if (i == 1) { 
    console.log = "hi"; 
} else { 
    document.getElementById('marketTimerTable').deleteRow(i); 
} 
} 

function insRow() { 
    if (itemNameField.value == "" || noticeField.value == "") { 
     var div = document.getElementById('errorMessage'); 
     div.innerHTML = "*Please fill in the fields*"; 
     div.style.color = 'red'; 
     document.body.appendChild(div); 
    } else { 
     var div = document.getElementById('errorMessage'); 
     div.innerHTML = ""; 
     var x = document.getElementById('marketTimerTable'); 
     var new_row = x.rows[1].cloneNode(true); 
     var len = x.rows.length; 
     var inp1 = new_row.cells[1].getElementsByTagName('div')[0]; 
     inp1.id += len; 
     inp1.innerHTML = itemNameField.value; 
     itemNameField.value = ""; 
     var inp2 = new_row.cells[2].getElementsByTagName('div')[0]; 
     inp2.id += len; 
     inp2.innerHTML = noticeField.value; 
     noticeField.stepUp(10); 
     var inp3 = new_row.cells[3].getElementsByTagName('div')[0]; 
     inp3.id += len; 
     inp3.innerHTML = noticeField.value; 
     noticeField.stepUp(5); 
     var inp4 = new_row.cells[4].getElementsByTagName('div')[0]; 
     inp4.id += len; 
     inp4.innerHTML = noticeField.value; 
     var inp5 = new_row.cells[5].getElementsByTagName('div')[0]; 
     inp5.id += len; 
     inp5.innerHTML = ""; 
     noticeField.value = ""; 
     x.appendChild(new_row); 
    } 
} 

我提前道歉，因爲我的代碼可能是非常的混亂和格式錯誤。以下是JSFIDDLE！謝謝:)

Answer 1

計算當前和給定的時間之間的區別，你可以使用setInterval

例子：

var noticeTime = noticeField.value.split(":"); 
    const interval = setInterval(function(){ 
     var currentDate = (new Date()); 
     var diffInHours = currentDate.getHours() - noticeTime[0]; 
     var diffInMinutes = currentDate.getMinutes() - noticeTime[1]; 
     inp5.innerHTML = diffInHours + ":" + diffInMinutes; 
     if(diffInHours === 0 && diffInMinutes === 0) { 
     clearInterval(interval); 
     } 
    },1000) 

Answer 2

我設法從ProgXx代碼的幫助下做到這一點。

添加以下代碼：

var noticeTime = noticeField.value.split(":"); 
var originalTime = noticeField.value.split(":"); 
const interval = setInterval(function(){ 
    var currentDate = (new Date()); 
    noticeTime[1] = originalTime[1] - currentDate.getMinutes() + 10; 
    noticeTime[1] = noticeTime[1] + (originalTime[0] * 60) - (currentDate.getHours() * 60); 

這裏是finihsed代碼的的jsfiddle：http://jsfiddle.net/joefj8wb/