zoukankan html css js c++ java

纯js日历

做日历的初衷是可以随意按照自己的想法定义日历样式和行为，网上的日历插件限制太大

目前日历处于制作阶段，限制只出一个普通版本的，没啥功能，分享下

有兴趣的可以下载附件，运行看效果 https://files.cnblogs.com/z-Relix/calendar.rar

 1 <!DOCTYPE HTML>
 2 <html lang="zh">
 3     <head>
 4         <meta charset="utf-8" />
 5     </head>
 6     <style type="text/css">
 7         body,ul,li {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         .calendar {
13             width: 210px;
14             border: solid #000 1px;        
15         }
16 
17         .cal_title {
18             position: relative;
19             text-align: center;        
20         }
21         .cal_title a {
22             position: absolute;
23             top: 0;
24             left: 0;
25         }
26         .cal_title .cal_next {
27             left: 85%;
28         }
29 
30         .cal_week,
31         .cal_date {
32             font-size: 12px;
33             text-align: center;
34             list-style: none;
35             overflow: hidden;    
36         }
37         .cal_week li,
38         .cal_date li {
39             float: left;
40             width: 20px;
41             padding: 5px;
42         }
43 
44         .cal_date {
45             color: #f00;
46         }
47         .cal_other {
48             color: #ccc;
49         }
50     </style>
51     <body>
52         
53         <div id="cal"></div>
54         
55         <script src="script/tools.util.js"></script>
56         <script src="script/tools.date.js"></script>
57         <script type="text/javascript">
58             //调用日历
59             //方式一: st.calendar(); 调用默认日历
60             //方式二: st.calendar(data);diy日历
61             st.calendar({
62                 weekFormat:'' //默认中文星期文本
63                 /*
64                  * weekFormat: 'EN' //英文星期文本
65                  * weekFormat: { //自定义星期文本
66                        '0':'',
67                        '1':'',
68                        '2':'',
69                        '3':'',
70                        '4':'',
71                        '5':'',
72                        '6':''    
73                  * }
74                 */
75 
76                 //待续
77             });
78         </script>
79     </body>
80 </html>

  1 (function(){
  2     var SuperTime = function(year,month){
  3         var _date = this._init(year,month),
  4             _lastDate = null,
  5             _firstDate = null,
  6             _yestMonth = null;
  7         
  8         this.date = _date.getDate();
  9         this.month = _date.getMonth() + 1;
 10         this.year = _date.getFullYear();
 11         this.day = _date.getDay();
 12         
 13         _firstDate = this.getFirstDay();
 14         this.firstDay = _firstDate.day;
 15         
 16         _lastDate = this.getlastDate();
 17         this.lastDate = _lastDate.date;
 18         this.lastDay = _lastDate.day;
 19         
 20         _nextDate = this.getDate(1);
 21         this.nextDate = _nextDate.date;
 22         this.nextDay = _nextDate.day;
 23         
 24         _yestDate = this.getDate(-1);
 25         this.yesterdate = _yestDate.date;
 26         this.yesterday = _yestDate.day;
 27 
 28         _yestMonth = this.getYestMonth();
 29         this.yestMonthAllDate = _yestMonth.allDay;
 30     };
 31     
 32     SuperTime.prototype = {
 33         constructor: SuperTime,
 34 
 35         _init: function(year,month) {
 36             var date = null;
 37 
 38             if(arguments[0] && arguments[1]) {
 39                 date = new Date(arguments[0],arguments[1] - 1);
 40             }
 41             else {
 42                 date = new Date();
 43             }
 44 
 45             return date;
 46         },
 47         
 48         /**
 49          * 获取指定日期是星期几
 50          * 
 51          * @param {undefined,null} 返回今天是星期几
 52          * @param {String} '2014-12-31' 返回2014-12-31是星期几
 53          * @param {Number} getDay(1)返回明天是星期几，getDay(-1)返回昨天是星期几
 54          *
 55          * @return {Number} day 星期几
 56         */
 57         getDay: function(){
 58             var arg = arguments[0],
 59                 match = [],
 60                 day = '';
 61             
 62             if(!arg) {
 63                 day = this.day;
 64             }
 65             else {
 66                 if(typeof arg === 'number' || typeof arg === 'string') {
 67                     try {
 68                         match = arg.split('-');
 69 
 70                         if(match.length > 2) {
 71                             try {
 72                                 var newDate = new Date(match[0],match[1] - 1,match[2]);
 73 
 74                                 day = newDate.getDay();
 75                             }
 76                             catch(e) {
 77                                 return e.message;
 78                             }
 79                         }
 80                     }
 81                     catch(e) {                    
 82                         day = changeDate(arg).day;
 83                     }
 84                 }
 85                 else {
 86                     day = this.day;
 87                 }
 88             }
 89             
 90             return day;
 91         },
 92         
 93         //建议内部使用
 94         getlastDate: function(year,month){
 95             var newDate = null;
 96 
 97             if(arguments.length == 2) {
 98                 newDate = new Date(year,month,0);
 99             }
100             else {
101                 newDate = new Date(this.year,this.month,0);
102             }
103             
104             return {
105                 'date': newDate.getDate(),
106                 'day': newDate.getDay()
107             };
108         },
109         
110         //建议内部使用
111         getDate: function(day){
112             var newDate;
113             
114             newDate = changeDate(day);
115             
116             return {
117                 'date': newDate.date,
118                 'day': newDate.day
119             };
120         },
121         
122         /**
123          * 返回当月第一天是星期几
124          *
125          * @return {Object Date}
126         */
127         getFirstDay: function(){
128             var newDate = new Date(this.year,this.month - 1,1);
129             
130             return {
131                 'day': newDate.getDay()
132             };
133         },
134 
135         getYestMonth: function(){
136             var year = this.year,
137                 month = this.month,
138                 newDate = null;
139 
140             if(month == 0) {
141                 year = year - 1;
142                 month = 12;
143             }
144 
145             return {
146                 'allDay': this.getlastDate(year,month - 1).date
147             }
148         },
149 
150         calendar: function(data){
151             var parent = document.getElementById('cal'),
152                 title = document.createElement('div'),
153                 weekTitle = document.createElement('ul'),
154                 dateList = document.createElement('ul'),
155                 prev = document.createElement('a'),
156                 next = document.createElement('a');
157 
158             var weekFormat = ['日','一','二','三','四','五','六'];
159 
160             if(data && typeof data === 'object') {
161                 if(data.weekFormat) {
162                     if(data.weekFormat === 'EN') {
163                         weekFormat = ['Sun','Mon','Tue','Wen','Thu','Fri','Sat'];
164                     }
165                     else {
166                         if(typeof data.weekFormat === 'object') {
167                             for(var i in data.weekFormat) {
168                                 weekFormat[i] = data.weekFormat[i];
169                             }
170                         }
171                     }
172                 }
173             }
174             
175             parent.setAttribute('class','calendar');
176             title.setAttribute('class','cal_title');
177             weekTitle.setAttribute('class','cal_week');
178             dateList.setAttribute('class','cal_date');
179             prev.setAttribute('class','cal_prev');
180             prev.setAttribute('href','javascript:;');
181             next.setAttribute('class','cal_next');
182             next.setAttribute('href','javascript:;');
183 
184             createCal.apply(this,arguments);
185 
186             function createCal() {
187                 var count = this.firstDay;
188                 //日期标题显示
189                 title.innerHTML = this.year + '-' + this.month + '-' + this.date;
190                 prev.innerHTML = 'prev';
191                 next.innerHTML = 'next';
192 
193                 for(var w = 0; w < 7; w++) {
194                     //星期显示
195                     weekTitle.innerHTML += '<li>' + weekFormat[w] + '</li>';
196                 }
197 
198                 for(var d = 1, last = this.lastDate; d <= last; d++) {
199                     //上月部分日期显示
200                     while(count) {
201                         dateList.innerHTML += '<li class="cal_other cal_yestMonth">' + (this.yestMonthAllDate - count + 1)+ '</li>';
202                         count--;
203                     }
204                     //本月日期显示
205                     dateList.innerHTML += '<li>' + d + '</li>';
206                 }
207 
208                 //下月部分日期显示
209                 for(var ld = 1, last = (42 - this.firstDay - this.lastDate); ld <= last; ld++) {
210                     dateList.innerHTML += '<li class="cal_other cal_nextMonth">' + ld + '</li>';
211                 }
212                 append(title,prev,next);
213                 append(parent,title,weekTitle,dateList);
214             }
215 
216             (function(self){
217                 var btn_p = document.getElementsByClassName('cal_prev'),
218                     btn_n = document.getElementsByClassName('cal_next'),
219                     newDate = null,
220                     year = self.year,
221                     month = self.month;
222 
223                 btn_p[0].addEventListener('click',function(){
224                     month--;
225                     if(month == 0) {
226                         year--;
227                         month = 12;
228                     }
229                     updateCal(year,month,deleteCal);                    
230                 });
231 
232                 btn_n[0].addEventListener('click',function(){
233                     month++;
234                     if(month == 13) {
235                         year++;
236                         month = 1;
237                     }
238                     
239                     updateCal(year,month,deleteCal);
240                 });
241 
242                 function updateCal(year,month,func) {
243                     if(func) {
244                         func.call();
245                     }
246                     
247                     newDate = new SuperTime(year,month);
248                     createCal.apply(newDate);
249                 }
250 
251                 function deleteCal() {
252                    removeChildNodes(parent,title,weekTitle,dateList); 
253                 }
254 
255             }(this));
256         }
257     };
258     
259     /**
260      *根据指定天数改变日期
261      *
262      * @param {Number} day 指定天数，ex 2：两天。 -2：前两天
263      * 
264      * @return {Object}
265     */
266     function changeDate(day) {
267         if(!day || typeof day !== 'number') {
268             return false;
269         }
270         
271         var oneday = 1000 * 3600 * 24,
272             newDate = new Date(),
273             newDate = new Date(newDate.getTime() + day * oneday);
274         
275         return {
276             'date': newDate.getDate(),
277             'month': newDate.getMonth() + 1,
278             'year': newDate.getFullYear(),
279             'day': newDate.getDay()
280         };
281     }
282 
283     window['st'] = new SuperTime();
284 })();

查看全文

相关阅读:
tab选项卡可自动播放
 鼠标跟随效果
 初识html5
浅谈权限设计
 css表格撑大问题解决
 通用数据权限管理系统设计
 样式兼容IE7
RBAC用户角色权限设计
 大话权限设计
 一个简易实用的web权限管理模块的应用与实现

原文地址：https://www.cnblogs.com/z-Relix/p/3678690.html