重写Calendar类

最新推荐文章于 2024-08-23 09:55:57 发布

wtcsy

最新推荐文章于 2024-08-23 09:55:57 发布

阅读量1k

点赞数

文章标签： calendar function date button properties xhtml

本文链接：https://blog.csdn.net/wtcsy/article/details/4485100

版权

以前写过一遍,昨天看了看,相当的糟糕.决定重写一遍.

同时参考了cloudgamer与果果的代码(17 js 行实现日历,很强悍)..

学到了一些新的东西记录下来

写日历首先想到会判断闰年

事实上是可以不用的只要知道这个月的天数就可以了

这是在cloudgamer的boke中看到的

new Date(this.Year, this.Month+1, 0).getDate(); 获得这个月的天数..

写日历其实就是只需要知道这个月的天数,这个月的一号是星期几(因为要根据这个来填充),就可以完成了

一个简单的例子, 主要帮助自己记录一些写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test---Calendar</title> </head> <body> <div id='date' style="height:400px; width:600px; border:1px solid #000000; "> </div> <div > <input value="昨天的信息" type="button"οnclick="ss(-1,'d')" />　<input value="明天的信息" type="button" οnclick="ss(1,'d')"/><br><br> <input value="上个月信息" type="button"οnclick="ss(-1,'m')" />　<input value="下个月信息" type="button" οnclick="ss(1,'m')"/><br><br> <input value="上一年信息" type="button"οnclick="ss(-1,'y')" />　<input value="下一年信息" type="button" οnclick="ss(1,'y')"/> </div> <script> var cc = null; var $ = function(id){ return document.getElementById(id); }; function d(){ var t = new Date(); this.y = t.getFullYear(); this.m = t.getMonth(); this.d = t.getDate(); } function show(){ var tt = new Date(cc.y,cc.m,cc.d); $('date').innerHTML = "<div>所选日期是"+tt.getFullYear()+"年"+(parseInt(tt.getMonth())+1)+"月"+tt.getDate()+"日"+"</div>"; $('date').innerHTML = $('date').innerHTML+"<div>这个月的一号是：星期"+new Date(tt.getFullYear(),tt.getMonth(),1).getDay()+"</div>"; $('date').innerHTML = $('date').innerHTML + "<div>这个月一共有"+new Date(tt.getFullYear(),tt.getMonth()+1, 0).getDate()+"天</div>"; } window.onload = function(){ cc = new d(); show(); } function ss(n,t){ switch(t){ case "d" : cc.d = cc.d + n; show(); break; case "m" : cc.m = cc.m + n; show(); break; case "y" : cc.y = cc.y + n; show(); break; } } </script> </body> </html>

一个Calendar类,没有用表格咯...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>blog----Calendar</title> <style type="text/css"> #iCalendar{border:1px solid #196AB2;width:254px;_width:250px;position:absolute; padding:0 5px; font-family:Arial;background:#DEF0F9 url(http://beta.hi.csdn.net/attachment/200908/25/79043_1251221542Ex8X.gif) repeat-x ; } #iCalendar a,#iCalendar b{display:block; float:left;zoom: 1;width:28px;height:28px;line-height:28px; padding:2px; background:#DEF0F9;font-size:12px;text-align:center;color:#1668B1;font-family:Arial; text-decoration:none; margin:0px 2px; } #iCalendar a.im { background: #0099CC; color:#FFFFFF} #iCalendar b{background:none ;} #iCalendar a:hover{background:#A9DAF3;color:#900;font-weight:bold} #iCalendar .btn{cursor:pointer;color:#fff; } #iCalendar #dateCap{width:100px;_width:98px;color:#fff;} </style> </head> <body style="margin:20px; padding:20px;"> <script language="javascript"> function $(id){ return typeof id == "string"?document.getElementById(id):id; } function $$(p,e){ return p.getElementsByTagName(e); } function create(e,p,fn){ var element = document.createElement(e); p.appendChild(element);fn&&fn(element);return element; } var Bind = function(object, fun,args) { return function() { return fun.apply(object,args||[]); } } function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); } function Extend(destination, source){ for (var property in source) { destination[property] = source[property]; } } var Class = function(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; }; var Calendar = new Class({ options:{ onclick : function(){}, important :null }, initialize : function(container,options){ var today = new Date(); this.container = container; this.year = today.getFullYear(); this.month = today.getMonth(); this.date = today.getDate(); this.important = new Array(); this.important.push([this.year,this.month,this.date]); Extend(this.options,options||{}); this.onclick = this.options.onclick; if(this.options.important)this.important = this.important.concat(this.options.important); var _self = this; var title = [{t:"<<",s:['className','btn'],a:"PrevYear"},{t:"<",s:['className','btn'],a:"PrevMonth"},{t:"",s:['id','dateCap']},{t:">",s:['className','btn'],a:"NextMonth"},{t:">>",s:['className','btn'],a:"NextYear"},{t:"日"},{t:"一"},{t:"二"},{t:"三"},{t:"四"},{t:"五"},{t:"六"}]; for(var i = 0,l = title.length;i<l;i++) { create("b",this.container,function(e){ e.innerHTML = title[i].t; if(title[i].s)e[title[i].s[0]] = title[i].s[1]; if(title[i].a)addListener(e,'click',Bind(_self,_self[title[i].a])) }) }; for(var j = 0;j<42;j++) { create("a",this.container,function(e){e.setAttribute("href","javascript:void(0);");})} this.draw(today); }, draw : function(arg){ var f = new Date(arg.getFullYear(),arg.getMonth(),1).getDay(); //这个月的第一天为星期几,前面几个b标签的内容就空着 var days = new Date(arg.getFullYear(),arg.getMonth()+1, 0).getDate(); for(var i = 0;i < 42;i++) { $$(this.container,"a")[i].className = null; if(i>=f&&i<(f+days)) { if(this.importantday(arg.getFullYear(),arg.getMonth(),i-f+1)) { $$(this.container,"a")[i].className = "im"; } $$(this.container,"a")[i].innerHTML = i-f+1; continue; } $$(this.container,"a")[i].innerHTML = ""; } this.container.getElementsByTagName("b")[2].innerHTML = arg.getFullYear() +"年"+(arg.getMonth()+1)+"月"+arg.getDate(); }, NextMonth : function(){ this.month = this.month + 1; this.draw(new Date(this.year,this.month,this.date)); }, PrevMonth : function(){ this.month = this.month - 1; this.draw(new Date(this.year,this.month,this.date)); }, NextYear : function(){ this.year = this.year + 1; this.draw(new Date(this.year,this.month,this.date)); }, PrevYear : function(){ this.year = this.year - 1; this.draw(new Date(this.year,this.month,this.date)); }, importantday : function(y,m,d){ for(var i = 0,l = this.important.length;i<l;i++) { if(y==this.important[i][0]&&m==this.important[i][1]&&d==this.important[i][2]) return true; } return false; } }); window.onload = function(){ new Calendar($('iCalendar'),{important:[[new Date().getFullYear(),new Date().getMonth()+1,new Date().getDate()],[new Date().getFullYear(),new Date().getMonth()-1,new Date().getDate()-8]]}); } </script> <div id='iCalendar'></div> </body> </html>