Question

我正在制作一个页面，以便轻松计算何时可以下班回家。该页面在加载时应设置开始日期。这样，我不必知道何时开始工作，只需打开浏览器即可。然后，通过单击其中一个按钮，只需增加几个小时即可。

这个例子是我已经尝试过的许多事情之一。但是我认为这很接近。欢迎任何建议。我不包括jquery，因为它的规模很小。

function reset() {
  var date = new Date();
  var hour = date.getHours(),
    min = date.getMinutes();

  hour = (hour < 10 ? "0" : "") + hour;
  min = (min < 10 ? "0" : "") + min;

  var timestamp = hour + ":" + min;

  document.getElementById("start_time").value = timestamp;
}

function add_time_76() {
  var start = document.getElementById("start_time").value;
  document.getElementById("end_time").value = start + 7, 6;
}

function getTotal() {
  var start = document.getElementById("start_time").value;
  var end = document.getElementById("end_time").value;
  document.getElementById("total").value = end - start;
}

<body onload="reset()">

  <p>Start time: <input name="start_time" type="time" /></p>
  <p>Time to go home: <input name="end_time" type="time" /></p>
  <p>Total hours: <input type="text" name="total" readonly></p>


  <button onclick="add_time_76()">Add 7,6h</button>
  <button onclick="add_time_8()">Add 8h</button>
  <br><br>
  <button onclick="getTotal()">Calculate Total</button>
  <br><br>
  <button onclick="reset()">Reset</button>

</body>

我想要的时间字段没有被填充。

Answer 1

只需在输入中添加一个ID。

<p>Start time: <input id="start_time" name="start_time" type="time" /></p>
<p>Time to go home: <input id="end_time" name="end_time" type="time" /></p>
<p>Total hours: <input id="total" type="text" name="total" readonly></p>

JS时间计算的添加和设置值

1 个答案: