知识点:
主要是对Date对象的使用。(下面的介绍内容来自网络)
创建 Date 对象的语法:
var myDate=new Date()
Date 对象会自动把当前日期和时间保存为其初始值。
参数形式有以下5种:
new Date("month dd,yyyy hh:mm:ss");
new Date("month dd,yyyy");
new Date(yyyy,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);
new Date(ms);
注意:最后一种形式,参数表示的是需要创建的时间和GMT时间1970年1月1日之间相差的毫秒数。
参数的含义如下:
month:用英文表示月份名称,从January到December
mth:用整数表示月份,从(1月)到11(12月)
dd:表示一个月中的第几天,从1到31
yyyy:四位数表示的年份
hh:小时数,从0(午夜)到23(晚11点)
mm:分钟数,从0到59的整数
ss:秒数,从0到59的整数
ms:毫秒数,为大于等于0的整数
Date对象的方法:
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份(四位数字)。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份(四位数字)。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource() 返回该对象的源代码。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 请使用 toUTCString() 方法代替。 1 3
toUTCString() 根据世界时,把 Date 对象转换为字符串。
toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
UTC() 根据世界时返回 1997 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。
var objDate=new Date([arguments list]);
简单日历实现:
效果:
代码:
1 <style> 2 #calendar{ 3 font-size: 12px; 4 } 5 #calendar tbody td{ 6 background:#033; 7 color: #fff; 8 text-align: center; 9 padding: 2px; 10 } 11 .detail{ 12 text-align:center; 13 } 14 </style> 15 测试值:<input id="calendar_value" name="" type="text" /><br /> 16 <button id="cal_prev">上一月</button> 17 <button id="cal_next">下一月</button> 18 <button id="cal_preyear">上一年</button> 19 <button id="cal_nextyear">下一年</button> 20 <button id="cal_today">今天</button> 21 <div id="calendar" style="position:absolute;"></div> 22 23 <script> 24 25 var Calendar=function(year,monthNum,parent){ 26 this.year=year; 27 this.parent=parent; 28 this.monthNum=monthNum-1; 29 function isLeapYear(y){ 30 return (y>0)&&!(y%4)&&((y%100)||!(y%400)); 31 } 32 this.numDays=[31,isLeapYear(this.year)?29:28,31,30,31,30,31,31,30,31,30,31][this.monthNum]; 33 this.weekDays=["日","一","二","三","四","五","六"]; 34 this.nowDate=new Date; 35 this.init(); 36 } 37 38 Calendar.prototype={ 39 setMonthNum:function(monthNum){ 40 this.monthNum=monthNum-1; 41 }, 42 getMonthNum:function(){ 43 return this.monthNum+1; 44 }, 45 setYearNum:function(year){ 46 this.year=year; 47 }, 48 getYearNum:function(){ 49 return this.year; 50 }, 51 init:function(){ 52 this.setup(this.parent); 53 }, 54 reflesh:function(){ 55 this.setup(this.parent); 56 }, 57 setup:function(id){ 58 var date=this.nowDate; 59 var cal=document.getElementById(id); 60 cal.innerHTML=""; 61 var calDiv=document.createElement("div"); 62 var tab=document.createElement("table"); 63 cal.appendChild(calDiv); 64 calDiv.innerHTML=this.getSummary(); 65 cal.appendChild(tab); 66 calDiv.className="detail" 67 this.thead=document.createElement("thead"); 68 this.tbody=document.createElement("tbody"); 69 this.tfoot=document.createElement("tfoot"); 70 this.tr=document.createElement("tr"); 71 this.td=document.createElement("td"); 72 73 tab.appendChild(this.thead); 74 tab.appendChild(this.tbody); 75 this.setThead(); 76 this.create(); 77 78 }, 79 setThead:function(){ 80 var day=this.weekDays; 81 var tr=this.tr.cloneNode(true); 82 this.thead.appendChild(tr); 83 for(var i=0;i<7;i++){ 84 var td=this.td.cloneNode(true); 85 tr.appendChild(td); 86 td.innerHTML=day[i]; 87 } 88 }, 89 create:function(){ 90 var day=new Date(this.year,this.monthNum,1); 91 var tr=this.tr.cloneNode(true); 92 var dayCount=this.numDays; 93 var that=this; 94 95 that.tbody.appendChild(tr); 96 for(var j=0;j<day.getDay();j++){ 97 var td=that.td.cloneNode(true); 98 tr.appendChild(td); 99 td.innerHTML=" "; 100 } 101 for(var i=1;i<=dayCount;i++){ 102 if((j+i)%7-1==0){ 103 tr=that.tr.cloneNode(true); 104 that.tbody.appendChild(tr); 105 } 106 var td=that.td.cloneNode(true); 107 var s=i; 108 if(i==that.nowDate.getDate()){ 109 s="<font color='red'>"+i+"</font>"; 110 } 111 td.innerHTML=s; 112 td.style.cursor="pointer"; 113 td.onclick=function(){ 114 document.getElementById("calendar_value").value=(that.getYearNum()+"/"+that.getMonthNum()+"/"+this.innerHTML) 115 } 116 td.onmouseover=function(){ 117 this.style.background="#fff"; 118 this.style.color="#033" 119 } 120 td.onmouseout=function(){ 121 this.style.background=""; 122 this.style.color="#fff" 123 } 124 tr.appendChild(td); 125 } 126 }, 127 getSummary:function(){ 128 var date=this.nowDate; 129 return this.year+"年"+(this.monthNum+1)+"月"+date.getDate()+"日"; 130 } 131 } 132 var cal=new Calendar(2013,5,"calendar"); 133 cal.init(); 134 135 document.getElementById("cal_prev").onclick=function(){ 136 cal.monthNum--; 137 if(cal.getMonthNum()<1){ 138 cal.setMonthNum(12); 139 cal.year--; 140 } 141 cal.reflesh(); 142 } 143 document.getElementById("cal_next").onclick=function(){ 144 cal.monthNum++ 145 if(cal.getMonthNum()>12){ 146 cal.setMonthNum(1); 147 cal.year++; 148 } 149 cal.reflesh(); 150 } 151 document.getElementById("cal_today").onclick=function(){ 152 cal.setYearNum((new Date).getFullYear()); 153 cal.setMonthNum((new Date).getMonth()+1) 154 cal.reflesh(); 155 } 156 document.getElementById("cal_preyear").onclick=function(){ 157 cal.setYearNum(cal.getYearNum()-1); 158 cal.reflesh(); 159 } 160 document.getElementById("cal_nextyear").onclick=function(){ 161 cal.setYearNum(cal.getYearNum()+1); 162 cal.reflesh(); 163 } 164 </script>
总结:
以上代码未加注释,写得有点急。以后再整理一下,许多功能未实现。