JS實現(xiàn)簡單的天數(shù)計算器完整實例

更新時間：2017年04月28日 10:16:05 作者：綠葉兒

這篇文章主要介紹了JS實現(xiàn)簡單的天數(shù)計算器,結(jié)合完整實例形式分析了javascript針對日期的獲取及天數(shù)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)簡單的天數(shù)計算器。分享給大家供大家參考，具體如下：

剛學(xué)了JS，想做個計算兩個日期之間相差天數(shù)的東西，因為本人總是要算距離XX還有多少天。。

開始用很笨的方法寫了一個，寫完百度了一下，發(fā)現(xiàn)用 Date() 的話幾行代碼就可以搞定。自己看語法的時候一掃而過，覺得會了，其實是不會的，至少在該用它的時候都想不到他有這個功能，這就是掌握類庫的重要性吧。

先放上寫的很笨的那種方法：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>天數(shù)計算器</title>
  <script src="../lib/js/jquery-2.1.1.js"></script>
  <script src="year.js"></script>
</head>
<body>
  <h2>天數(shù)計算器</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;
  },
  // 相差的整年數(shù)，換算成天數(shù)
  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>天數(shù)計算器</title>
  <script src="../lib/js/jquery-2.1.1.js"></script>
  <script src="year.js"></script>
</head>
<body>
  <h2>天數(shù)計算器</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>

以后要繼續(xù)優(yōu)化界面，爭取使用起來感覺更好，尤其是界面~

PS：這里再為大家推薦幾款比較實用的天數(shù)計算在線工具供大家使用：

在線日期/天數(shù)計算器：
http://tools.jb51.net/jisuanqi/date_jisuanqi

在線日期計算器/相差天數(shù)計算器：
http://tools.jb51.net/jisuanqi/datecalc

在線日期天數(shù)差計算器：
http://tools.jb51.net/jisuanqi/onlinedatejsq

在線天數(shù)計算器：
http://tools.jb51.net/jisuanqi/datejsq

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript時間與日期操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: