JS实现简单的天数计算器完整实例
程序员文章站
2023-12-04 20:40:16
本文实例讲述了js实现简单的天数计算器。分享给大家供大家参考，具体如下：
刚学了js，想做个计算两个日期之间相差天数的东西，因为本人总是要算距离xx还有多少天。。
开始...
本文实例讲述了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：这里再为大家推荐几款比较实用的天数计算在线工具供大家使用：
在线日期/天数计算器：
在线日期计算器/相差天数计算器：
在线日期天数差计算器：
在线天数计算器：
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript时间与日期操作技巧总结》、《javascript查找算法技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。