zoukankan html css js c++ java

一步一步理解日历calendar（三）

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

        //判断是否为闰年
        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='上年' onclick='preYear()' />" + y + "<input type='button' value='上年' onclick='nextYear()' />"
                + "<input type='button' value='上月' onclick='preMonth()' />" + parseInt(m + 1) + "<input type='button' value='下月' onclick='nextMonth()' />"
                + "<input type='button' value='今天' onclick='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> </td>";
                    }
                }
                html += "</table>";
                return html;
            }
        }

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- 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='上年' onclick='preYear()' />" + y + "<input type='button' value='上年' onclick='nextYear()' />"
 63                 + "<input type='button' value='上月' onclick='preMonth()' />" + parseInt(m + 1) + "<input type='button' value='下月' onclick='nextMonth()' />"
 64                 + "<input type='button' value='今天' onclick='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>

查看全文

相关阅读:
还是不能偷懒ForEach陷阱
 备忘ForEach方法与foreach迭代器使用小区别
 备忘反射调用Private方法
 机器人也会梦见电子羊吗
 Windows 7 下Skype最小化到系统托盘
 编译Boost_1_37_0 For VS2008
使用API判断网络是否连通(InternetGetConnectedState / IsNetworkAlive)
SVN中“txncurrentlock：拒绝访问”错误
 幂函数的非递归算法
 Visual Studio中的文件类型（sln vcproj suo user ncb）

原文地址：https://www.cnblogs.com/kuikui/p/2324460.html