一步一步理解日历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='上年' ο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;
            }
        }

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

一步一步理解日历calendar（三）相关推荐

  1. 一步一步理解Paxos算法

    一步一步理解Paxos算法 作者:jw (360电商技术组) 背景 Paxos算法是Lamport于1990年提出的一种基于消息传递的一致性算法.由于算法难以理解起初并没有引起人们的重视,使Lampo ...

  2. 一步一步理解GB、GBDT、xgboost

    GBDT和xgboost在竞赛和工业界使用都非常频繁,能有效的应用到分类.回归.排序问题,虽然使用起来不难,但是要能完整的理解还是有一点麻烦的.本文尝试一步一步梳理GB.GBDT.xgboost,它们 ...

  3. 最新出炉，头条三面技术四面HR，看我如何一步一步攻克面试官

    Redis的zset实现延时任务 设计题:如何设计tiny url 为什么要四次挥手 HTTPS - - 第二天收到hr小姐姐的电话,约了面试时间 二面(项目+Redis+MySQL+kafka) 自 ...

  4. 如何从RNN起步，一步一步通俗理解LSTM

    如何从RNN起步,一步一步通俗理解LSTM 前言 提到LSTM,之前学过的同学可能最先想到的是ChristopherOlah的博文<理解LSTM网络>,这篇文章确实厉害,网上流传也相当之广 ...

  5. 一步一步教你写股票走势图——K线图三（添加均线）

    目录 一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...

  6. NLP（二十九）一步一步，理解Self-Attention

      本文大部分内容翻译自Illustrated Self-Attention, Step-by-step guide to self-attention with illustrations and ...

  7. 设计php框架_利用 Composer 一步一步构建自己的 PHP 框架（三）——设计 MVC

    利用 Composer 一步一步构建自己的 PHP 框架(三)--设计 MVC 2014-10-14 / 阅读数:50438 / 分类: PHP 终于可以 "一次编写,到处发布" ...

  8. 一步一步实现扫雷游戏（C语言实现）(三)

    使用WIN32API连接窗口 此项目相关博文链接 一步一步实现扫雷游戏(C语言实现)(一) 一步一步实现扫雷游戏(C语言实现)(二) 一步一步实现扫雷游戏(C语言实现)(三) 一步一步实现扫雷游戏(C ...

  9. jQuery 1.3 for Asp.Net、 CSLA.Net 3.6 for Windows 及 MOSS/WSS 一步一步从入门到精通三个系列的目录...

    jQuery for Asp.Net 一步一步从入门到精通(附 jQuery API 彩色大图) CSLA.Net 3.6 for Windows (C# 2008)一步一步从入门到精通 MOSS/W ...

最新文章

  1. 【年度学术大会合集】SIGGRAPH，KDD，AAAI，NIPS…这些你想参加的会议
  2. 如何将Emacs添加到右键菜单并显示为“烤肉”
  3. iphone复制不能全选_忘记Apple ID密码，如何直接在 iPhone 上更改？
  4. Unity 基本操作
  5. Golang 学习笔记（08）—— 文件操作
  6. mac java 读取到服务器上的文件夹_如何在Mac和Win之间高效共享文件？mac和win文件高效共享教程
  7. Pytorch:Tensor和Numpy
  8. 链上体育和游戏平台Rage.Fan完成160万美元私募轮融资
  9. 工业相机录像丢帧的解决方案
  10. 应该被记住的天才，写在图灵诞辰100周年
  11. 信创办公--基于WPS的Word最佳实践系列（页眉页脚的设置）
  12. 小学计算机考核,小学信息技术学科考核评价方案.docx
  13. python高级练习题:转换所有的案件！【难度：3级】--景越Python编程实例训练营,不同难度Python习题，适合自学Python的新手进阶
  14. 【重学前端】CSS（一）
  15. wxj项目的开发一点记录
  16. 蓝牙BQB认证 Profile测试
  17. 打开计算机页面只有上面一半,我电脑打开网页总是打开一半,不知道是为什么,请高手指教,谢谢!...
  18. 大数据挖掘-伤寒论和金匮要略（COVID-19用药启示录）
  19. 2009.7.30-8.4生活小结
  20. 3D打印设备的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告

热门文章

  1. 用python编写nao机器人舞蹈_python实现nao机器人身体躯干和腿部动作操作
  2. 【python毕业设计源码】汽车销售系统
  3. 获取苏宁易购商品信息操作详情
  4. 邮箱大师支持html,网易邮箱大师
  5. selenium打开网页被检测，怎么屏蔽和绕过
  6. 手机摄影最常用的 5 种构图方式
  7. Windows系统中设置软件的开机自动启动
  8. java面试之每天五题
  9. java同一个包是什么意思_java中包到底是什么意思？包访问权限又是什么意思，有C++基础。...
  10. css弹性盒之justify-content详解