万年历案例

Posted 2020-10-24 ~逍遥★星辰~

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

　　效果图：

 

　　HTML代码：

 1 <div class="calendar">
 2     <caption>
 3       <div class="title">
 4         <div class="leftArr">&lt;</div>
 5         <div class="date">
 6           <span class="year"></span>年
 7           <span class="month"></span>月
 8           <!-- <span class="day"> </span>日 -->
 9         </div>
10         <div class="rightArr">&gt;</div>
11       </div>
12     </caption>
13     <table>
14       <thead>
15         <tr>
16           <th><i>日</i></th>
17           <th><i>一</i></th>
18           <th><i>二</i></th>
19           <th><i>三</i></th>
20           <th><i>四</i></th>
21           <th><i>五</i></th>
22           <th><i>六</i></th>
23         </tr>
24       </thead>
25       <tbody></tbody>
26     </table>
27   </div>
28   <div class="back">返回当前月份</div>

 　　css代码：

 1 .calendar .title {
 2       text-align: center;
 3       padding: 20px;
 4     }
 5 
 6     .calendar .leftArr,
 7     .calendar .rightArr {
 8       display: inline-block;
 9       width: 10px;
10       height: 10px;
11       line-height: 10px;
12       margin: 0 10px;
13     }
14 
15     .calendar .date {
16       display: inline-block;
17     }
18 
19     .calendar table {
20       width: 100%;
21     }
22 
23     .calendar th,
24     .calendar td {
25       width: 14.25%;
26       height: 32px;
27       text-align: center;
28     }
29 
30     .calendar table th i,
31     .calendar table td i {
32       display: inline-block;
33       width: 32px;
34       height: 100%;
35       border-radius: 50%;
36       text-align: center;
37       color: #000;
38       font-style: normal;
39       line-height: 32px;
40       outline: none;
41     }
42 
43     .active {
44       background-color: #6baabb;
45       color: #fff!important;
46     }
47 
48     .current {
49       border: 1px solid red;
50     }
51 
52     .back {
53       text-align: center;
54       background-color: #6baabb;
55       color: #fff;
56       height: 30px;
57       line-height: 30px;
58       width: 90%;
59       margin: 10px auto;
60     }

　　js代码：

 1 $(function () {
 2       var date_total, date, year_total, year, month_total, month, day_total, day;
 3       date_total = date = new Date();
 4       year_total = year = date.getFullYear();
 5       month = date.getMonth() + 1;
 6       month_total = month = month < 10 ? ("0" + month) : month;
 7       day = date.getDate();
 8       day_total = day = day < 10 ? ("0" + day) : day;
 9 
10       make_table();
11 
12       $(".leftArr").off("click").on("click", function () {
13         if (month <= 01) {
14           month = "12";
15           year--;
16         } else {
17           month--;
18           month = month < 10 ? "0" + month : month;
19         }
20         make_table();
21       });
22       $(".rightArr").off("click").on("click", function () {
23         if (month >= 12) {
24           month = "01";
25           year++;
26         } else {
27           month++;
28           month = month < 10 ? "0" + month : month;
29         }
30         make_table();
31       });
32 
33       $("tbody").off("click").on("click", "td", function () {
34         $(this).children("i").addClass("active").end().siblings().children().removeClass("active").end().parent().siblings().find("i").removeClass("active");
35       });
36 
37       $(".back").off("click").on("click", function () {
38         date = date_total;
39         year = year_total;
40         month = month_total;
41         day = date_total;
42         make_table();
43       });
44 
45       function make_table() {
46         $(".year").html(year);
47         $(".month").html(month);
48         // $(".day").html(day);
49         var first_day = new Date(year + "-" + month + "-01").getDay();  // 获取当前月份第一天是星期几
50         var dates = get_dates(year, month);
51         var html = "<tr>";
52         for (var i = 0, j = 1; i < (dates + first_day); i++) {
53           if (i < first_day) {
54             html += "<td></td>";
55           } else {
56             if ((i + 1) % 7 == 0) {
57               if (year_total == year && month_total == month && day_total == j) {
58                 html += "<td><i class=\'active current\'>" + j + "</i></td></tr>";
59               } else {
60                 html += "<td><i>" + j + "</i></td></tr>";
61               }
62             } else if (i % 7 == 0) {
63               if (year_total == year && month_total == month && day_total == j) {
64                 html += "<tr><td><i class=\'active current\'>" + j + "</i></td>";
65               } else {
66                 html += "<tr><td><i>" + j + "</i></td>";
67               }
68             } else {
69               if (year_total == year && month_total == month && day_total == j) {
70                 html += "<td><i class=\'active current\'>" + j + "</i></td>";
71               } else {
72                 html += "<td><i>" + j + "</i></td>";
73               }
74             }
75             j++;
76           }
77         };
78         $("tbody").html(html);
79       }
80 
81       function get_dates(yyyy, mm) {
82         if (parseInt(mm) == 02) {
83           return parseInt(yyyy) % 4 == 0 ? 29 : 28;
84         } else if (parseInt(mm) == 01 || parseInt(mm) == 03 || parseInt(mm) == 05 || parseInt(mm) == 07 || parseInt(mm) == 08 || parseInt(mm) == 10 || parseInt(mm) == 12) {
85           return 31;
86         } else {
87           return 30;
88         }
89       }
90 
91     });

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