JS实现简单的天数计算器完整实例

更新时间：2020-05-09 12:54:01 作者：startmvc

本文实例讲述了JS实现简单的天数计算器。分享给大家供大家参考，具体如下：刚学了JS，

本文实例讲述了JS实现简单的天数计算器。分享给大家供大家参考，具体如下：

刚学了JS，想做个计算两个日期之间相差天数的东西，因为本人总是要算距离XX还有多少天。。

开始用很笨的方法写了一个，写完百度了一下，发现用 Date() 的话几行代码就可以搞定。自己看语法的时候一扫而过，觉得会了，其实是不会的，至少在该用它的时候都想不到他有这个功能，这就是掌握类库的重要性吧。

先放上写的很笨的那种方法：

index.html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>天数计算器</title>
 <script src="../lib/js/jquery-2.1.1.js"></script>
 <script src="year.js"></script>
</head>
<body>
 <h2>天数计算器</h2>
 <div>
 <label>起:</label>
 <input type="text" id="beginYear">
 <label >年</label>
 <input type="text" id="beginMonth">
 <label >月</label>
 <input type="text" id="beginDay">
 <label >日</label>
 </div>
 <br>
 <div>
 <label>止:</label>
 <input type="text" id="endYear">
 <label >年</label>
 <input type="text" id="endMonth">
 <label >月</label>
 <input type="text" id="endDay">
 <label >日</label>
 </div>
 <br>
 <div>
 <input type="button" id="submit" value="确定" onclick="days()">
 <input type="button" id="cancel" value="取消">
 </div>
 <script>
 function days() {
 // 一年的第几天
 var day1 = YEAR.dayOfYear( Number($("#beginYear").val()), Number($("#beginMonth").val()) ) + Number($("#beginDay").val());
 var day2 = YEAR.dayOfYear( Number($("#endYear").val()), Number($("#endMonth").val()) ) + Number($("#endDay").val());
 var year1 = Number($("#beginYear").val());
 var year2 = Number($("#endYear").val());
 if ( year1 < year2 ) {
 var sum = YEAR.yearCount( Number($("#beginYear").val()), Number($("#endYear").val()) );
 if ( YEAR.isLeapYear( year1 ) )
 sum = sum + (366 - day1) + day2;
 else
 sum = sum + (365 - day1) + day2;
 alert("之间有" + sum + "天！");
 } else if ( year1 == year2 ) {
 sum = day2 - day1;
 alert("之间有" + sum + "天！");
 } else {
 $(function() {
 alert("请输入正确的起止时间！");
 });
 }
 }
 </script>
</body>
</html>

year.js


window.YEAR = {
 // 判断是不是闰年
 isLeapYear : function (year) {
 if((year % 4 == 0 && year % 100 !=0 ) || year % 400 == 0)
 return true;
 else
 return false;
 },
 // 相差的整年数，换算成天数
 yearCount : function (yearBefore, yearAfter) {
 var year = yearBefore + 1;
 var sum = 0;
 while (year < yearAfter) {
 if ( YEAR.isLeapYear(year) )
 sum = sum + 366;
 else
 sum = sum + 365;
 year++;
 }
 return sum;
 },
 // 一年中的第几天，只计算到月份
 dayOfYear : function (year, month ) {
 var myYear = year;
 var sum = 0;
 for(var i = 1; i < month; i++) {
 switch(i) {
 case 1:
 case 3:
 case 5:
 case 7:
 case 8:
 case 10:
 sum = sum + 31;
 break;
 case 4:
 case 6:
 case 9:
 case 11:
 sum = sum + 30;
 break;
 case 2:
 if(YEAR.isLeapYear(myYear))
 sum = sum + 29;
 else
 sum = sum + 28;
 break;
 }
 }
 return sum;
 },
};

下面说另一种方法，主要用到Date里面的Date.parse（），具体使用详情，w3school上面有。下面代码~


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>天数计算器</title>
 <script src="../lib/js/jquery-2.1.1.js"></script>
 <script src="year.js"></script>
</head>
<body>
 <h2>天数计算器</h2>
 <div>
 <label>起:</label>
 <input type="text" id="beginYear">
 <label >年</label>
 <input type="text" id="beginMonth">
 <label >月</label>
 <input type="text" id="beginDay">
 <label >日</label>
 </div>
 <br>
 <div>
 <label>止:</label>
 <input type="text" id="endYear">
 <label >年</label>
 <input type="text" id="endMonth">
 <label >月</label>
 <input type="text" id="endDay">
 <label >日</label>
 </div>
 <br>
 <div>
 <input type="button" id="submit" value="确定" onclick="test()">
 <input type="button" id="cancel" value="取消">
 </div>
 <script>
 function test() {
 var minutes = 1000 * 60
 var hours = minutes * 60
 var days = hours * 24
 var y1 = Number($("#beginYear").val());
 var m1 = Number($("#beginMonth").val());
 var d1 = Number($("#beginDay").val());
 var y2 = Number($("#endYear").val());
 var m2 = Number($("#endMonth").val());
 var d2 = Number($("#endDay").val());
 var date1 = $("#beginYear").val() +',' + $("#beginMonth").val() +','+ $("#beginDay").val();
 var date2 = $("#endYear").val() +','+ $("#endMonth").val() + ','+$("#endDay").val();
 var day1 = Date.parse(date1);
 var day2 = Date.parse(date2);
 d = day2 - day1;
 d = d / days;
 alert("之间有" + d + "天！");
 }
 </script>
</body>
</html>

以后要继续优化界面，争取使用起来感觉更好，尤其是界面~

PS：这里再为大家推荐几款比较实用的天数计算在线工具供大家使用：

在线日期/天数计算器： http://tools.jb51.net/jisuanqi/date_jisuanqi

在线日期计算器/相差天数计算器： http://tools.jb51.net/jisuanqi/datecalc

在线日期天数差计算器： http://tools.jb51.net/jisuanqi/onlinedatejsq

在线天数计算器： http://tools.jb51.net/jisuanqi/datejsq