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);

这是完成代码的JSFIDDLE：http://jsfiddle.net/joefj8wb/

比较给定时间和当前时间的多个倒计时器？

2 个答案: