码迷,mamicode.com
首页 > 其他好文 > 详细

万年历案例

时间:2018-02-11 21:28:01      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:ack   20px   col   按钮   imp   ble   height   style   color   

  前几天在网上看到好多网站上都有日历,当时就在纠结这玩意是怎么写出来的,而且日期还能来回切换,后来经过自己的构思,写出来了一个小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_total = month = date.getMonth() + 1;
 6       month < 10 ? month_total = month = ("0" + month) : month;
 7       day_total = day = date.getDate();
 8       day < 10 ? day_total = day = ("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 < 10 ? month = "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 < 10 ? month = "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算是一次项目小经验吧,拿出来跟大家分享一下~,若有不足之处还请大牛留言指出!

 

万年历案例

标签:ack   20px   col   按钮   imp   ble   height   style   color   

原文地址:https://www.cnblogs.com/xiaoyaoxingchen/p/8442945.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!