万年历案例

　　前几天在网上看到好多网站上都有日历，当时就在纠结这玩意是怎么写出来的，而且日期还能来回切换，后来经过自己的构思，写出来了一个小demo，最后感觉也没有这么难，下边便把这个demo展现出来：

　　效果图：

　　HTML代码：

<div class="calendar">
    <caption>
      <div class="title">
        <div class="leftArr">&lt;</div>
        <div class="date">
          <span class="year"></span>年
          <span class="month"></span>月
          <!-- <span class="day"> </span>日 -->
        </div>
        <div class="rightArr">&gt;</div>
      </div>
    </caption>
    <table>
      <thead>
        <tr>
          <th><i>日</i></th>
          <th><i>一</i></th>
          <th><i>二</i></th>
          <th><i>三</i></th>
          <th><i>四</i></th>
          <th><i>五</i></th>
          <th><i>六</i></th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <div class="back">返回当前月份</div>

 　　css代码：

.calendar .title {
      text-align: center;
      padding: 20px;
    }

    .calendar .leftArr,
    .calendar .rightArr {
      display: inline-block;
       10px;
      height: 10px;
      line-height: 10px;
      margin: 0 10px;
    }

    .calendar .date {
      display: inline-block;
    }

    .calendar table {
       100%;
    }

    .calendar th,
    .calendar td {
       14.25%;
      height: 32px;
      text-align: center;
    }

    .calendar table th i,
    .calendar table td i {
      display: inline-block;
       32px;
      height: 100%;
      border-radius: 50%;
      text-align: center;
      color: #000;
      font-style: normal;
      line-height: 32px;
      outline: none;
    }

    .active {
      background-color: #6baabb;
      color: #fff!important;
    }

    .current {
      border: 1px solid red;
    }

    .back {
      text-align: center;
      background-color: #6baabb;
      color: #fff;
      height: 30px;
      line-height: 30px;
       90%;
      margin: 10px auto;
    }

　　js代码：

$(function () {
      var date_total, date, year_total, year, month_total, month, day_total, day;
      date_total = date = new Date();
      year_total = year = date.getFullYear();
      month = date.getMonth() + 1;
      month_total = month = month < 10 ? ("0" + month) : month;
      day = date.getDate();
      day_total = day = day < 10 ? ("0" + day) : day;

      make_table();

      $(".leftArr").off("click").on("click", function () {
        if (month <= 01) {
          month = "12";
          year--;
        } else {
          month--;
          month = month < 10 ? "0" + month : month;
        }
        make_table();
      });
      $(".rightArr").off("click").on("click", function () {
        if (month >= 12) {
          month = "01";
          year++;
        } else {
          month++;
          month = month < 10 ? "0" + month : month;
        }
        make_table();
      });

      $("tbody").off("click").on("click", "td", function () {
        $(this).children("i").addClass("active").end().siblings().children().removeClass("active").end().parent().siblings().find("i").removeClass("active");
      });

      $(".back").off("click").on("click", function () {
        date = date_total;
        year = year_total;
        month = month_total;
        day = date_total;
        make_table();
      });

      function make_table() {
        $(".year").html(year);
        $(".month").html(month);
        // $(".day").html(day);
        var first_day = new Date(year + "-" + month + "-01").getDay();  // 获取当前月份第一天是星期几
        var dates = get_dates(year, month);
        var html = "<tr>";
        for (var i = 0, j = 1; i < (dates + first_day); i++) {
          if (i < first_day) {
            html += "<td></td>";
          } else {
            if ((i + 1) % 7 == 0) {
              if (year_total == year && month_total == month && day_total == j) {
                html += "<td><i class='active current'>" + j + "</i></td></tr>";
              } else {
                html += "<td><i>" + j + "</i></td></tr>";
              }
            } else if (i % 7 == 0) {
              if (year_total == year && month_total == month && day_total == j) {
                html += "<tr><td><i class='active current'>" + j + "</i></td>";
              } else {
                html += "<tr><td><i>" + j + "</i></td>";
              }
            } else {
              if (year_total == year && month_total == month && day_total == j) {
                html += "<td><i class='active current'>" + j + "</i></td>";
              } else {
                html += "<td><i>" + j + "</i></td>";
              }
            }
            j++;
          }
        };
        $("tbody").html(html);
      }

      function get_dates(yyyy, mm) {
        if (parseInt(mm) == 02) {
          return parseInt(yyyy) % 4 == 0 ? 29 : 28;
        } else if (parseInt(mm) == 01 || parseInt(mm) == 03 || parseInt(mm) == 05 || parseInt(mm) == 07 || parseInt(mm) == 08 || parseInt(mm) == 10 || parseInt(mm) == 12) {
          return 31;
        } else {
          return 30;
        }
      }

    });

　　这个小demo可以定位到当前日期，点击日期前后的箭头可以查看上一月和下一月的日期，同时点击“返回当前月份”’按钮可以跳到当前所在的年月日期。总的来说这个小demo算是一次项目小经验吧，拿出来跟大家分享一下~，若有不足之处还请大牛留言指出！