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>

查看全文

相关阅读:
QOMO Linux 4.0 正式版发布
 LinkChecker 8.1 发布，网页链接检查
 pgBadger 2.1 发布，PG 日志分析
 Aletheia 0.1.1 发布，HTTP 调试工具
 Teiid 8.2 Beta1 发布，数据虚拟化系统
 zLogFabric 2.2 发布，集中式日志存储系统
 开源电子工作套件 Arduino Start Kit 登场
 Piwik 1.9 发布，网站访问统计系统
 Ruby 1.9.3p286 发布，安全修复版本
 toBraille 1.1.2 发布，Java 盲文库

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