一步一步理解日历calendar(一)描述画出日历这张表格;
一步一步理解日历calendar(二)增加了上一年、下一年、上一月、下一月的功能;
一步一步理解日历calendar(三)采用了面向对象的方式表现出来
功能介绍:
1、上一年、下一年、上一月、下一月、今天,功能相对简单。
2、当天日期着重显示。
效果图如下:

一步一步理解日历calendar(三)-编程知识网

        //判断是否为闰年
        function isLeapYear(year) {
            if (0 == year % 400 || (0 == year % 4 && 0 != year % 100)) {
                return true;
            }
            else {
                return false;
            }
        }
        //每月的天数
        function maxDayOfDate(year, month) {
            if (1 == month || 3 == month || 5 == month || 7 == month || 8 == month || 10 == month || 12 == month) {
                return 31;
            }
            else if (4 == month || 6 == month || 9 == month || 11 == month) {
                return 30;
            }
            else {
                if (isLeapYear(year)) {
                    return 29;
                }
                else {
                    return 28;
                }
            }
        }
        // d是日期类型  返回每月的第一天
        function getStartDate(d) {
            d.setDate(1);
            return d;
        }
        // d是日期类型  返回每月的最后一天
        function getEndDate(d) {
            var totalDays = maxDayOfDate(parseInt(d.getFullYear()), parseInt(d.getMonth() + 1));
            d.setDate(totalDays);
            return d;
        }

      
       //创建Calender类
       function Calender(obj) {
            this.obj = mid = obj;
            this.obj.innerHTML = this.createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
        }

        Calender.prototype = {
            createCalender: function (start, end) {
                var html = "<table class='calendar' border='1px' cellpadding='0' cellspacing='0'><thead>"
                + "<tr><th colspan='7'><input type='button' value='上年' οnclick='preYear()' />" + y + "<input type='button' value='上年' οnclick='nextYear()' />"
                + "<input type='button' value='上月' οnclick='preMonth()' />" + parseInt(m + 1) + "<input type='button' value='下月' οnclick='nextMonth()' />"
                + "<input type='button' value='今天' οnclick='today()'></th></tr>"
                + "<tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></thead>";
                var days = end.getDate();
                var week = start.getDay() == 0 ? 7 : start.getDay();
                var tmpd = new Date();
                day = tmpd.getDate();
                for (var i = 1; i <= 42; i++) {
                    if (1 == i % 7 || 1 == i) {
                        html += "<tr>";
                    }
                    if (i >= week && i <= (week + days – 1)) {
                        if (day == (i – week + 1)) {
                            if (d.getFullYear() == start.getFullYear() && d.getMonth() == start.getMonth()) {
                                html += "<td class='today'>" + day + "</td>";
                            }
                            else {
                                html += "<td >" + day + "</td>";
                            }
                        } else if (day < i – week + 1) {
                            html += "<td>" + parseInt(i – week + 1) + "</td>";
                        }
                        else {
                            html += "<td>" + parseInt(i – week + 1) + "</td>";
                        }
                        if (7 == i % 7 || 7 == i) {
                            html += "</tr>";
                        }
                    }
                    else {
                        html += "<td>&nbsp;</td>";
                    }
                }
                html += "</table>";
                return html;
            }
        }

一步一步理解日历calendar(三)-编程知识网一步一步理解日历calendar(三)-编程知识网View Code

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>一步一步理解日历calendar(三)</title>
5 <style type="text/css">
6 *{margin: 0px;padding: 0px;}
7 .calendar{text-align: center;border-width: thin;}
8 .calendar th{background-color: #6666FF;}
9 .calendar .today{background-color: Orange;color: Red;font-weight: bold;}
10 </style>
11 <script type="text/javascript">
12 function isLeapYear(year) {
13 if (0 == year % 400 || (0 == year % 4 && 0 != year % 100)) {
14 return true;
15 }
16 else {
17 return false;
18 }
19 }
20
21 function maxDayOfDate(year, month) {
22 if (1 == month || 3 == month || 5 == month || 7 == month || 8 == month || 10 == month || 12 == month) {
23 return 31;
24 }
25 else if (4 == month || 6 == month || 9 == month || 11 == month) {
26 return 30;
27 }
28 else {
29 if (isLeapYear(year)) {
30 return 29;
31 }
32 else {
33 return 28;
34 }
35 }
36 }
37
38 function getStartDate(d) {
39 d.setDate(1);
40 return d;
41 }
42
43 function getEndDate(d) {
44 var totalDays = maxDayOfDate(parseInt(d.getFullYear()), parseInt(d.getMonth() + 1));
45 d.setDate(totalDays);
46 return d;
47 }
48
49 var d = new Date();
50 var y = d.getFullYear();
51 var m = d.getMonth();
52 var mid;
53
54 function Calender(obj) {
55 this.obj = mid = obj;
56 this.obj.innerHTML = this.createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
57 }
58
59 Calender.prototype = {
60 createCalender: function (start, end) {
61 var html = "<table class='calendar' border='1px' cellpadding='0' cellspacing='0'><thead>"
62 + "<tr><th colspan='7'><input type='button' value='上年' οnclick='preYear()' />" + y + "<input type='button' value='上年' οnclick='nextYear()' />"
63 + "<input type='button' value='上月' οnclick='preMonth()' />" + parseInt(m + 1) + "<input type='button' value='下月' οnclick='nextMonth()' />"
64 + "<input type='button' value='今天' οnclick='today()'></th></tr>"
65 + "<tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></thead>";
66 var days = end.getDate();
67 var week = start.getDay() == 0 ? 7 : start.getDay();
68 var tmpd = new Date();
69 day = tmpd.getDate();
70 for (var i = 1; i <= 42; i++) {
71 if (1 == i % 7 || 1 == i) {
72 html += "<tr>";
73 }
74 if (i >= week && i <= (week + days - 1)) {
75 if (day == (i - week + 1)) {
76 if (d.getFullYear() == start.getFullYear() && d.getMonth() == start.getMonth()) {
77 html += "<td class='today'>" + day + "</td>";
78 }
79 else {
80 html += "<td >" + day + "</td>";
81 }
82 } else if (day < i - week + 1) {
83 html += "<td>" + parseInt(i - week + 1) + "</td>";
84 }
85 else {
86 html += "<td>" + parseInt(i - week + 1) + "</td>";
87 }
88 if (7 == i % 7 || 7 == i) {
89 html += "</tr>";
90 }
91 }
92 else {
93 html += "<td>&nbsp;</td>";
94 }
95 }
96 html += "</table>";
97 return html;
98 }
99 }
100
101 function preYear() {
102 y = y - 1;
103 new Calender(mid).createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
104 }
105
106 function nextYear() {
107 y = y + 1;
108 new Calender(mid).createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
109 }
110
111 function preMonth() {
112 m = m - 1;
113 if (-1 == m) {
114 y = y - 1;
115 m = 11;
116 }
117 new Calender(mid).createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
118 }
119
120 function nextMonth() {
121 m = m + 1;
122 if (12 == m) {
123 y = y + 1;
124 m = 0;
125 }
126 new Calender(mid).createCalender(getStartDate(new Date(y, m)), getEndDate(new Date(y, m)));
127 }
128
129 function today() {
130 y = new Date().getFullYear();
131 m = new Date().getMonth();
132 new Calender(mid).createCalender(getStartDate(new Date()), getEndDate(new Date()));
133 }
134
135 window.onload = function () {
136 new Calender(document.getElementById("canlendar"));
137 }
138 </script>
139 </head>
140 <body>
141 <div id="canlendar">
142 </div>
143 </body>
144 </html>

 

转载于:https://www.cnblogs.com/kuikui/archive/2012/01/17/2324460.html