开发者社区> 爱六六> 正文

一步一步理解日历calendar(二)

简介: 新增功能:      1、增加了上一年,下一年,上个月,下个月,今天功能。      2、今天着重显示。效果如下图展示:       // 根据给定的参数year、month,返回某年某月的天数      //例如: MaxDayOfDate(2012,1)    结果:31         ...
+关注继续查看

新增功能:
      1、增加了上一年,下一年,上个月,下个月,今天功能。
      2、今天着重显示。
效果如下图展示:


      // 根据给定的参数year、month,返回某年某月的天数
      //例如: MaxDayOfDate(2012,1)    结果:31
            function MaxDayOfDate(year, month) {
                switch (month) {
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 8:
                    case 10:
                    case 12:
                        return 31;
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        return 30;
                    case 2:
                        if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
                            return 29;
                        }
                        else {
                            return 28;
                        }
                    default:
                        return 0;
                }
            }

     //参数d是日期Date类型,根据年份与月份返回某年某月的第一天
     //例如:假如今天是:2012年1月16日 ,GetStartDate(new Date())   结果:Date类型 2012-1-1
            function GetStartDate(d) { 
                d.setDate(1);
                return d;
            }
   
     //参数d是日期Date类型,根据年份与月份返回某年某月的最后一天
     //例如:假如今天是:2012年1月16日 ,GetStartDate(new Date())   结果:Date类型 2012-1-31
            function GetEndDate(d) {  
                var totalDays = MaxDayOfDate(parseInt(d.getFullYear()), parseInt(d.getMonth() + 1));
                d.setDate(totalDays);
                return d;
            }

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 .calender{text-align: center;}
8 .calender th{background-color: #6666FF;}
9 .calender .today{background-color: Orange;color: Red;font-weight: bold;}
10 </style>
11 <script type="text/javascript">
12 window.onload = function (day) {
13 function MaxDayOfDate(year, month) {
14 switch (month) {
15 case 1:
16 case 3:
17 case 5:
18 case 7:
19 case 8:
20 case 10:
21 case 12:
22 return 31;
23 case 4:
24 case 6:
25 case 9:
26 case 11:
27 return 30;
28 case 2:
29 if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
30 return 29;
31 }
32 else {
33 return 28;
34 }
35 default:
36 return 0;
37 }
38 }
39
40 function GetStartDate(d) {
41 d.setDate(1);
42 return d;
43 }
44
45 function GetEndDate(d) {
46 var totalDays = MaxDayOfDate(parseInt(d.getFullYear()), parseInt(d.getMonth() + 1));
47 d.setDate(totalDays);
48 return d;
49 }
50
51 function calender(start, end) {
52 var html = "<table class='calender' border='1px'><thead><tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></thead>";
53 var days = end.getDate();
54 var week = start.getDay() == 0 ? 7 : start.getDay();
55 var d = new Date();
56 day = d.getDate();
57 for (var i = 1; i <= 42; i++) {
58 if (1 == i % 7 || 1 == i) {
59 html += "<tr>";
60 }
61 if (i >= week && i <= (week + days - 1)) {
62 if (day == (i - week + 1)) {
63 if (d.getFullYear() == start.getFullYear() && d.getMonth() == start.getMonth()) {
64 html += "<td class='today'>" + day + "</td>";
65 }
66 else {
67 html += "<td >" + day + "</td>";
68 }
69 } else if (day < i - week + 1) {
70 html += "<td>" + parseInt(i - week + 1) + "</td>";
71 }
72 else {
73 html += "<td>" + parseInt(i - week + 1) + "</td>";
74 }
75 if (7 == i % 7 || 7 == i) {
76 html += "</tr>";
77 }
78 }
79 else {
80 html += "<td>&nbsp;</td>";
81 }
82 }
83 html += "</table>";
84 return html;
85 }
86 var d = new Date();
87 var y = d.getFullYear();
88 var m = d.getMonth();
89 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
90 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
91 document.getElementById("btnpre").onclick = function () {
92 y = y - 1;
93 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
94 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
95 }
96
97 document.getElementById("btnnext").onclick = function () {
98 y = y + 1;
99 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
100 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
101 }
102
103 document.getElementById("btnmpre").onclick = function () {
104 m = m - 1;
105 if (-1 == m) {
106 y = y - 1;
107 m = 11;
108 }
109 else if (12 == m) {
110 y = y + 1;
111 m = 0;
112 }
113 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
114 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
115 }
116
117 document.getElementById("btnmnext").onclick = function () {
118 m = m + 1;
119 if (-1 == m) {
120 y = y - 1;
121 m = 11;
122 }
123 else if (12 == m) {
124 y = y + 1;
125 m = 0;
126 }
127 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
128 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
129 }
130
131 document.getElementById("btntoday").onclick = function () {
132 var y = d.getFullYear();
133 var m = d.getMonth();
134 document.getElementById("test").innerHTML = calender(GetStartDate(new Date(y, m)), GetEndDate(new Date(y, m)));
135 document.getElementById("lbl").innerHTML = y + " " + parseInt(m + 1);
136 }
137 }
138 </script>
139 </head>
140 <body>
141 <div id="test">
142 </div>
143 <input id="btnpre" type="button" value="上年" />
144 <input id="btnnext" type="button" value="下年" />
145 <input id="btnmpre" type="button" value="上月" />
146 <input id="btnmnext" type="button" value="下月" />
147 <input id="btntoday" type="button" value="今天" />
148 <div id="lbl">
149 </div>
150 </body>
151 </html>



    

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18619 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
18522 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
21481 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
17893 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
8935 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
32674 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14584 0
+关注
爱六六
前端开发相关专家
164
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载