JavaScript实现日期天数计算的两种方法

作者：函数茶馆时间：2026-10-22 03:36:41浏览：288

本文介绍了使用JavaScript实现日期天数计算器的两种方法。首先展示了一种基于手动判断闰年和累加天数的基础实现方式，随后重点讲解了利用Date.parse()函数简化代码的高级技巧。通过对比两种方案，帮助开发者理解类库函数的实际应用价值，并提供相关在线工具推荐。

JavaScript日期天数计算实现方案

本文通过一个完整的实例，详细解析了如何使用JavaScript编写一个简单的天数计算器，供读者参考学习。

在初步学习JavaScript后，作者尝试开发一个计算两个日期之间相差天数的工具，主要目的是方便计算距离特定事件还有多少天。

起初采用了一种较为繁琐的方法进行编写，但在查阅资料后发现，利用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文档。相关代码如下：

基于Date.parse的优化方案


<!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>

未来计划继续优化用户界面，力求提升使用体验，特别是在视觉呈现和操作便捷性方面进行改进。

此外，推荐几款实用的在线天数计算工具供读者使用：

在线日期/天数计算器： 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程序设计有所帮助。

作者最新文章

Object.assign合并JS对象的用法与注意事项

2026-11-05 17:56:08

JS大数值转字符串出现科学计数法怎么办

2026-11-05 17:09:21

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38