JavaScript中表单的经过时间计算答案

【问题标题】：Time Elapsed Calculation from form in JavaScriptJavaScript中表单的经过时间计算
【发布时间】：2017-03-29 04:40:16
【问题描述】：

如果用户输入月份、日期和年份，我正在开发一个经过时间的计算器。根据他们的输入和当前日期，我想计算两者之间的天数，然后显示已经过去了多少年、几个月和几天。我首先制作了一个包含“月”、“日”和“年”三个输入值的表单。然后我开始编写脚本：

function timeElapsed() {
       var timeMonth = document.getElementById("month");
       var timeDay = document.getElementById("day");
       var timeYear = document.getElementById("year");
       var currentDate = new Date();
       var elapsed = 
       document.getElementById("timeElapsed").innerHTML = elapsed;
   }
       //Event Listener
       var submitButton= document.getElementById("sButton");
    if (submitButton.addEventListener) {
        submitButton.addEventListener("click", timeElapsed, false);
    } else if (submitButton.attachEvent) {
        submitButton.attachEvent("onclick", timeElapsed);
    }

显然，正如您所说，我有点停下来，因为我不知道从这里去哪里。这对我来说是学校里的一个实验室，我只想了解如何去做。我的老师提到“请注意，您的程序必须包含将超过 31 的日期值转换为月份的代码，以及将超过 12 的月份转换为年份的代码。” 我实际上完全糊涂了，但理解他的意思.它只是实际上了解如何实际执行此操作。这是一门网络课程，仅从教科书很难理解。我在网上看了一些，但我没有找到任何对我的情况有用的东西。如果你能帮助我，非常感谢。

【问题讨论】：

您可以从new Date(year, month-1, day) 创建一个日期开始，然后得到如下所示的差异：Converting a date from DD-MM-YYYY to DD/MM/YYYY in Javascript and finding the difference。请注意，您可能应该将 currentDate 的小时数归零，然后四舍五入以适应可能的夏令时问题（或使用所有 UTC 方法）。

标签： javascript html forms date elapsedtime

【解决方案1】：

这是一个example，您可以使用它来计算日期差异

function get(ID){
  return document.getElementById(ID);
}

function calculateDiff(){
  var FromYear 	= get('FromYear').value;
  var FromMonth = get('FromMonth').value;
  var FromDay 	= get('FromDay').value;

  var ToYear 	= get('ToYear').value;
  var ToMonth 	= get('ToMonth').value;
  var ToDay 	= get('ToDay').value;
	
  var date1 	= new Date(FromYear,FromMonth,FromDay);   /*Create Date Object From date*/
  var date2 	= new Date(ToYear,ToMonth,ToDay);         /*Create Date Object To date*/
  var diff 	= new Date(date2.getTime() - date1.getTime());

  get('ResultYear').value  = diff.getUTCFullYear()-1970;  /*Calculate year difference*/
  get('ResultMonth').value = diff.getUTCMonth();          /*Count month difference*/
  get('ResultDay').value   = diff.getUTCDate()-1;         /*Count day difference*/
}

calculateDiff();

var calculate = get('calculate');

calculate.onclick = function(){
  calculateDiff();
}

table input{
  width: 60px;
}
button{
  width: 80%;
  margin: 10px auto;
}

<table border="1">
  <tbody>
    <tr class="header">
      <th>&nbsp;</th>
      <th>YYYY</th>
      <th>MM</th>
      <th>DD</th>
    </tr>
    <tr>
      <th>FROM</th>
      <td><input  id="FromYear"  placeholder="YYYY" value="2017"></td>
      <td><input  id="FromMonth" placeholder="MM" value="3"></td>
      <td><input  id="FromDay"   placeholder="DD" value="18"></td>
    </tr>
    <tr>
      <th>TO</th>
      <td><input  id="ToYear"  placeholder="YYYY" value="2017"></td>
      <td><input  id="ToMonth" placeholder="MM" value="3"></td>
      <td><input  id="ToDay"   placeholder="DD" value="29"></td>
	</tr>
    <tr>
      <th colspan="4">
        <button id="calculate">Calculate</button>
      </th>
    </tr>
    <tr>
       <th>RESULT</th>
       <td><input  id="ResultYear"  placeholder="YYYY" value=""></td>
       <td><input  id="ResultMonth" placeholder="MM" value=""></td>
       <td><input  id="ResultDay"   placeholder="DD" value=""></td>
     </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

在javascript你可以得到当前日期

var currentDate = new Date();
var currentMonth = currentDate.getMonth() + 1; // as it starts from 0
var currentDay = currentDate.getDate();
var currentYear = currentDate.getFullYear();

从输入日期字段中获取值后，您需要进行一些基本的数学运算，例如

if(currentMonth < inputMonth) {
  monthBetween = inputMonth - currentMonth;
} else if(currentMonth > inputMonth) {
  monthBetween = currentMonth - inputMonth;
} else {
  monthBetween = 0;
}

这里有一些示例代码，您可以尝试并从中学习。 https://jsfiddle.net/8pd5f3pe/1/

【讨论】：