前几天在网上看到好多网站上都有日历,当时就在纠结这玩意是怎么写出来的,而且日期还能来回切换,后来经过自己的构思,写出来了一个小demo,最后感觉也没有这么难,下边便把这个demo展现出来:
效果图:
HTML代码:
1 <div class="calendar">
2 <caption>
3 <div class="title">
4 <div class="leftArr"><</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">></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算是一次项目小经验吧,拿出来跟大家分享一下~,若有不足之处还请大牛留言指出!
更多专业前端知识,请上 【猿2048】www.mk2048.com