时间戳

首页 > 解决方案 > 关于使用 2 个函数比较日期的 JS 问题

javascript - 关于使用 2 个函数比较日期的 JS 问题

问题描述

嗨，我是 Javascript 的新手，很抱歉问了一些问题。这段代码在它应该检索经过的天数时返回一个 Nan。第二个功能是否导致问题？

这里是：

<body>
  <script>
    function elapsedTime(date1, date2) {
      var start = new Date(date1);
      var startMilli = start.getTime();

      var end = new Date(date2);
      var endMilli = end.getTime();

      var elapsed = (endMilli - startMilli);
      alert(millisToDaysHoursMinutes(elapsed));

    }
    function millisToDaysHoursMinutes(millis) {
      var seconds = millis / 1000;
      var totalMinutes = seconds / 60;
      var minutesPerDay = 60 * 24;
      var days  = totalMinutes / minutesPerDay;

      return days;
    }
  </script>
  <form>
    Start:<input type="text" name="date1" value="dd/m/year" /><br>
    End:  <input type="text" name="date2" value="dd/m/year" />
    <input type="button" name="button1" onclick="elapsedTime(date1.value, date2.value)" value="Get Elapsed Time" />
  </form>
</body>

标签： javascript

解决方案

您需要确保输入的日期有效，否则您将得到一个NaN（不是数字）。使用input type=date并制作它们，required然后您可以在调用日期差异函数之前轻松检查它们是否有效。

例如：

function elapsedTime(date1, date2) {
  var start = new Date(date1);
  var startMilli = start.getTime();

  var end = new Date(date2);
  var endMilli = end.getTime();

  var elapsed = (endMilli - startMilli);
  alert(millisToDaysHoursMinutes(elapsed));

}

function millisToDaysHoursMinutes(millis) {
  var seconds = millis / 1000;
  var totalMinutes = seconds / 60;
  var minutesPerDay = 60 * 24;
  var days = totalMinutes / minutesPerDay;

  return days;
}
var date1 = document.querySelector("input[name=date1]"),
  date2 = document.querySelector("input[name=date2]"),
  button1 = document.querySelector("input[name=button1]");

button1.addEventListener("click", function() {
  var date1valid = date1.checkValidity();
  var date2valid = date2.checkValidity();
  if (date1valid && date2valid) {
    elapsedTime(date1.value, date2.value);
  } else {
    alert("Please provide both dates!");
  }
});
<form>
  Start:<input type="date" name="date1" required="required" value="dd/m/year" /><br> End: <input type="date" name="date2" required="required" value="dd/m/year" />
  <input type="button" name="button1" value="Get Elapsed Time" />
</form>

推荐阅读