重写Calendar类

偏执的太偏执、 2022-08-05 14:25 174阅读 0赞

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

同时参考了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>