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

程序员文章站 2023-01-03 16:47:38

本文实例讲述了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程序设计有所帮助。

上一篇：如何在window系统下快速建立Django框架

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

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

原生JS实现的跳一跳小游戏完整实例

使用 js 简单的实现 bind、call 、aplly代码实例

js实现简单的计算器功能

原生js基于canvas实现一个简单的前端截图工具代码实例

JS实现的走迷宫小游戏完整实例

超级简易的JS计算器实例讲解(实现加减乘除)

Android开发实现的简单计算器功能【附完整demo源码下载】

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

JS实现简单的二元方程计算器功能示例

JS实现的简单tab切换功能完整示例