提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript-简单的日历实现及Date对象语法介绍(附图)

JavaScript对象 实现 简单 介绍 语法 Date 日历
2023-06-13 09:15:00 时间
知识点：

主要是对Date对象的使用。（下面的介绍内容来自网络）

创建Date对象的语法：
varmyDate=newDate()
Date对象会自动把当前日期和时间保存为其初始值。
参数形式有以下５种：
newDate("monthdd,yyyyhh:mm:ss");
　newDate("monthdd,yyyy");
newDate(yyyy,mth,dd,hh,mm,ss);
newDate(yyyy,mth,dd);
newDate(ms);

注意:最后一种形式，参数表示的是需要创建的时间和GMT时间1970年1月1日之间相差的毫秒数。

参数的含义如下：

month:用英文表示月份名称，从January到December

mth:用整数表示月份，从（１月）到１１（１２月）

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()方法代替。13
toUTCString()根据世界时，把Date对象转换为字符串。
toLocaleString()根据本地时间格式，把Date对象转换为字符串。
toLocaleTimeString()根据本地时间格式，把Date对象的时间部分转换为字符串。
toLocaleDateString()根据本地时间格式，把Date对象的日期部分转换为字符串。
UTC()根据世界时返回1997年1月1日到指定日期的毫秒数。
valueOf()返回Date对象的原始值。
varobjDate=newDate([argumentslist]);

简单日历实现：

效果：
 
代码：
复制代码代码如下:

<style>
#calendar{
font-size:12px;
}
#calendartbodytd{
background:#033;
color:#fff;
text-align:center;
padding:2px;
}
.detail{
text-align:center;
}
</style>
测试值：<inputid="calendar_value"name=""type="text"/><br/>
<buttonid="cal_prev">上一月</button>
<buttonid="cal_next">下一月</button>
<buttonid="cal_preyear">上一年</button>
<buttonid="cal_nextyear">下一年</button>
<buttonid="cal_today">今天</button>
<divid="calendar"style="position:absolute;"></div>

<script>

varCalendar=function(year,monthNum,parent){
this.year=year;
this.parent=parent;
this.monthNum=monthNum-1;
functionisLeapYear(y){
return(y>0)&&!(y%4)&&((y%100)||!(y%400));
}
this.numDays=[31,isLeapYear(this.year)?29:28,31,30,31,30,31,31,30,31,30,31][this.monthNum];
this.weekDays=["日","一","二","三","四","五","六"];
this.nowDate=newDate;
this.init();
}

Calendar.prototype={
setMonthNum:function(monthNum){
this.monthNum=monthNum-1;
},
getMonthNum:function(){
returnthis.monthNum+1;
},
setYearNum:function(year){
this.year=year;
},
getYearNum:function(){
returnthis.year;
},
init:function(){
this.setup(this.parent);
},
reflesh:function(){
this.setup(this.parent);
},
setup:function(id){
vardate=this.nowDate;
varcal=document.getElementById(id);
cal.innerHTML="";
varcalDiv=document.createElement("div");
vartab=document.createElement("table");
cal.appendChild(calDiv);
calDiv.innerHTML=this.getSummary();
cal.appendChild(tab);
calDiv.className="detail"
this.thead=document.createElement("thead");
this.tbody=document.createElement("tbody");
this.tfoot=document.createElement("tfoot");
this.tr=document.createElement("tr");
this.td=document.createElement("td");

tab.appendChild(this.thead);
tab.appendChild(this.tbody);
this.setThead();
this.create();

},
setThead:function(){
varday=this.weekDays;
vartr=this.tr.cloneNode(true);
this.thead.appendChild(tr);
for(vari=0;i<7;i++){
vartd=this.td.cloneNode(true);
tr.appendChild(td);
td.innerHTML=day[i];
}
},
create:function(){
varday=newDate(this.year,this.monthNum,1);
vartr=this.tr.cloneNode(true);
vardayCount=this.numDays;
varthat=this;

that.tbody.appendChild(tr);
for(varj=0;j<day.getDay();j++){
vartd=that.td.cloneNode(true);
tr.appendChild(td);
td.innerHTML=" ";
}
for(vari=1;i<=dayCount;i++){
if((j+i)%7-1==0){
tr=that.tr.cloneNode(true);
that.tbody.appendChild(tr);
}
vartd=that.td.cloneNode(true);
vars=i;
if(i==that.nowDate.getDate()){
s="<fontcolor="red">"+i+"</font>";
}
td.innerHTML=s;
td.style.cursor="pointer";
td.onclick=function(){
document.getElementById("calendar_value").value=(that.getYearNum()+"/"+that.getMonthNum()+"/"+this.innerHTML)
}
td.onmouseover=function(){
this.style.background="#fff";
this.style.color="#033"
}
td.onmouseout=function(){
this.style.background="";
this.style.color="#fff"
}
tr.appendChild(td);
}
},
getSummary:function(){
vardate=this.nowDate;
returnthis.year+"年"+(this.monthNum+1)+"月"+date.getDate()+"日";
}
}
varcal=newCalendar(2013,5,"calendar");
cal.init();

document.getElementById("cal_prev").onclick=function(){
cal.monthNum--;
if(cal.getMonthNum()<1){
cal.setMonthNum(12);
cal.year--;
}
cal.reflesh();
}
document.getElementById("cal_next").onclick=function(){
cal.monthNum++
if(cal.getMonthNum()>12){
cal.setMonthNum(1);
cal.year++;
}
cal.reflesh();
}
document.getElementById("cal_today").onclick=function(){
cal.setYearNum((newDate).getFullYear());
cal.setMonthNum((newDate).getMonth()+1)
cal.reflesh();
}
document.getElementById("cal_preyear").onclick=function(){
cal.setYearNum(cal.getYearNum()-1);
cal.reflesh();
}
document.getElementById("cal_nextyear").onclick=function(){
cal.setYearNum(cal.getYearNum()+1);
cal.reflesh();
}
</script>

总结：
以上代码未加注释，写得有点急。以后再整理一下，许多功能未实现。

相关文章