时间:2021-07-01 10:21:17 帮助过:106人阅读
本文实例讲述了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
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。