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

2024-09-28 03:34:50

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

JavaScript实现给定时间相加天数的方法

本文实例讲述了JavaScript实现给定时间相加天数的方法.分享给大家供大家参考,具体如下: /** * 时间相加处理函数 * @param date 需要计算的时间(xxxx-xx-xx) * @param plusDays 要加的天数(整数) */ function calcuDate(date, plusDays) { var dateArray = date.split("-"); var year = +dateArray[0]; var month = +dateArra
JS获取月份最后天数、最大天数与某日周数的方法

本文实例讲述了JS获取月份最后天数.最大天数与某日周数的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>标题页</title> <script language="javascript"> function getLastDay(year,month) { var new_year = year; /
Js 时间间隔计算的函数(间隔天数)

复制代码代码如下: function GetDateDiff(startDate,endDate) { var startTime = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime(); var endTime = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime(); var dates = Math.abs((startTim
JS 两个字符串时间的天数差计算

JS 两个字符串时间的天数差复制代码代码如下: var s = ((new Date(paramObj.end_date.replace(/-/g,"\/"))) - (new Date(paramObj.start_date.replace(/-/g,"\/")))); var day = s/1000/60/60/24
JS根据年月获得当月天数的实现代码

function getDaysInMonth(year,month){ month = parseInt(month,10); //parseInt(number,type)这个函数后面如果不跟第2个参数来表示进制的话,默认是10进制. var temp = new Date(year,month,0); return temp.getDate(); }
javascript计算当月剩余天数(天数计算器)示例代码

代码如下: 复制代码代码如下: <script language="JavaScript"> <!-- Beginvar today = new Date();var now = today.getDate();var year = today.getYear();if (year < 2000) year += 1900; // Y2K fixvar month = today.getMonth(); var monarr = new Array(31, 2
JavaScript实现简易的天数计算器实例【附demo源码下载】

本文实例讲述了JavaScript实现简易的天数计算器.分享给大家供大家参考,具体如下: 运行效果图如下: 功能: 1. 支持选择日期: 2. 自动计算闰年: 3. 支持使用当前日期. 代码: (1)html文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易天数计算器</title> <s
用javascript实现计算两个日期的间隔天数

ASP 里面计算两个时间的差距可以 DateDiff,但 javascript 里面没有,需要手写函数. js 里面居然可以直接 Date1-Date2,而且还是转换为毫秒计算时间差的. 复制代码代码如下: // 计算两个日期的间隔天数 function DateDiff(sDate1, sDate2){ //sDate1和sDate2是2002-12-18格式 var aDate, oDate1, oDate2, iDays aDate = sDate1.split("-"
javaScript 计算两个日期的天数相差(示例代码)

一:计算两个日期相差的天数比如: str1 = "2002-01-20" str2 = "2002-10-11" 怎样用javaScript计算出str1与str2之间相差的天数? 复制代码代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&
JS 两日期相减,获得天数的小例子(兼容IE,FF)

复制代码代码如下: function GetDay() { var arrDate, objDate1, objDate2, intDays; objDate1 = new Date(); objDate2 = new Date(); arrDate = $("#开始日期").val().split("-"); objDate1.setFullYear(arrDate[0], arrDate[1], arrDate[2]); arrDate =
js计算两个时间之间天数差的实例代码

复制代码代码如下: //判断是否为闰年function isLeapYear(year){if(year % 4 == 0 && ((year % 100 != 0) || (year % 400 == 0))){ return true;}return false;}//判断前后两个日期function validatePeriod(fyear,fmonth,fday,byear,bmonth,bday){if(fyear < byear){return true;}el

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

相关推荐

随机推荐