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

2019-11-19 16:42:11

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.VeVB.COm/jisuanqi/date_jisuanqi

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

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

在线天数计算器：
http://tools.VeVB.COm/jisuanqi/datejsq

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript时间与日期操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：解决浏览器会自动填充密码的问题

下一篇：jQuery实现jQuery-form.js实现异步上传文件