javascript - JavaScript 表单中耗时计算

Question

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

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 的月份转换为年的代码。”我实际上完全困惑，但明白他的意思。它只是实际上了解如何实际做到这一点。这是一门网络类(class)，仅靠课本很难理解。我在网上查了一下，但没有找到任何对我的情况有用的东西。如果您能帮助我，非常感谢。

Answer 1

这是一个可用于计算日期差异的示例

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>