从 JavaScript 中的表单计算经过的时间



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

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 的月份转换为年的代码">,我实际上完全困惑,但理解他的意思。它只是真正了解如何实际做到这一点。这是一门网络课,仅从教科书中很难理解。我在网上看了一下,但我没有找到任何对我的情况有用的东西。如果你能帮助我,非常感谢你。

这是一个可用于计算日期差异的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>

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/

最新更新