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

zl程序教程

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

当前栏目

js日历功能对象

JS对象 功能 日历
2023-06-13 09:14:32 时间
需求产生问题：本来想在网上找个js代码，可是发现要么太复杂，要么不好控制，要么兼容性不好......
问题分析：发现不是优秀的就是最好的....适合自己的就是最好的。
问题解决：决定自己写一个日历功能。
代码呈现：
日历主程序
复制代码代码如下:

varcalendar={
STR:function(){with(this.data)return""+Y+"年，"+M+"月，"+D+"号，星期"+WN[W];},
V:function(o,spli,sx){with(this)returno[sx]=""+data.Y+spli+data.M+spli+data.D},
T:function(){with(this)returndata.TABLE},
dnY:function(){with(this){calendarChange(data.Y+1,data.M-1,data.D)}},
dnM:function(){with(this){calendarChange(data.Y,data.M,data.D)}},
upY:function(){with(this){calendarChange(data.Y-1,data.M-1,data.D)}},
upM:function(){with(this){calendarChange(data.Y,data.M-2,data.D)}},
day:function(o){with(this){data.D=o;calendarChange(data.Y,data.M-1,data.D)}},
data:{Y:null,M:null,D:null,W:null,H:null,U:null,YMD:null,YMD_C:"hot",ARR:null,TABLE:null,MN:null,WN:null,SELECT:null,TADAY:newDate(),TADAY_C:"taday",ROWLEN:7,VALUE:null},
creatTable:function(){with(this){
vartable="<tableheight=100%width=100%><tr>"
for(vari=0;i<data.ROWLEN;i++){vart=data.WN[i]||" ";table+="<th>"+t+"</th>";}
for(variindata.ARR){varshowText=data.ARR[i]||" ",br=i%data.ROWLEN,title,css;
if(!br){table+="</tr><tr>"};
data.ARR[i]?title=data.Y+"-"+data.M+"-"+showText:title="";
String(data.TADAY.getDate())==String(data.ARR[i])?
(data.YMD.getFullYear()==data.TADAY.getFullYear()&&data.YMD.getMonth()==data.TADAY.getMonth()&&data.YMD.getDate()==data.TADAY.getDate())?
css=data.TADAY_C+""+data.YMD_C:css=data.YMD_C:css="";
table+="<tdtitle=""+title+""class="+css+">"+showText+"</td>";
}table+="</tr></table>"
data.TABLE=table;returntable;
}},
calendarStarArr:function(userY,userM,userD){with(this){
varArr=[];
varnow=newDate(userY,userM,userD);
varLastDay=now.getLastDay();
varFirstDayofWeek=now.FirstDayofWeek();
data.YMD=now;data.Y=now.getFullYear();
data.M=now.getMonth()+1;data.D=now.getDate();data.W=now.getDay();
while(Arr.length!=FirstDayofWeek){Arr.push(false)}
for(vari=0;i<LastDay;i++){Arr.push(i+1)}
while(Arr.length%data.ROWLEN!=0){Arr.push(false)}
data.ARR=Arr;returnArr;
}},
calendarChange:function(userY,userM,userD){with(this){
calendarStarArr(userY,userM,userD);creatTable()
}},
calendarStar:function(userY,userM,userD){with(this){
data.MN=["零","一","二","三","四","五","六","七","八","九","十","十一","十二"];
data.WN=["日","一","二","三","四","五","六"];
calendarChange(userY,userM,userD);
}},
init:function(){with(this){
Date.prototype.getLastDay=function(){return(newDate(this.getFullYear(),this.getMonth()+1,0).getDate())}
Date.prototype.FirstDayofWeek=function(){return(newDate(this.getFullYear(),this.getMonth(),1).getDay())}
calendarStar(newDate().getFullYear(),newDate().getMonth(),newDate().getDate())
}}
}

代码应用讲解：
复制代码代码如下:

varaa=newcalendar()//创建一个新日历
aa.init()//日历初始

复制代码代码如下:
obj.innerHTML=aa.STR()//显示日期字符串
obj.innerHTML=aa.T()//显示表格
aa.dnY()//下一年
aa.upY()//上一年
aa.dnM()//下一月
aa.upM()//上一月
aa.day(Number)//改变日历显示的几号(Number需要传一个数值型参数)

这个日历对象实现的是日历的核心功能功能，
具体是日历放在哪里，
哪个事件触发哪个函数这个我没有写，
要是那样的话就失去我写这个日历的原有目的了。
怎么大家都没反应，我弄个例子，大家看下吧
复制代码代码如下:
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>js日历效果-wangzf</title>
</head>
<style>
html,body{height:100%;width:100%;}
*{margin:0;padding:0;}
.calendarBox{width:100%;}
#calendar_control{background:#a3a3b4;}
#calendar_controlinput{min-width:inherit;}
#calendarBox{width:100%;height:100%;}
#calendar_str{cursor:pointer;text-align:center;font-weight:lighter;}
#calendar_bodytd{background:#f0f0f0;cursor:pointer;}
#calendar_bodytd.taday{background:#0CF;}
#calendar_bodytd.hot{background:#FF6;}
#calendar_bodyth{background:#3f526f;color:#fff;}
#calendar_bodytd,#calendar_bodyth{text-align:center;}
</style>
<script>
varcalendar={
STR:function(){with(this.data)return""+Y+"年，"+M+"月，"+D+"号，星期"+WN[W];},
V:function(spli){with(this)return""+data.Y+spli+data.M+spli+data.D},
T:function(){with(this)returndata.TABLE},
dnY:function(){with(this){calendarChange(data.Y+1,data.M-1,data.D)}},
dnM:function(){with(this){calendarChange(data.Y,data.M,data.D)}},
upY:function(){with(this){calendarChange(data.Y-1,data.M-1,data.D)}},
upM:function(){with(this){calendarChange(data.Y,data.M-2,data.D)}},
day:function(o){with(this){data.D=o;calendarChange(data.Y,data.M-1,data.D)}},
data:{Y:null,M:null,D:null,W:null,H:null,U:null,YMD:null,YMD_C:"hot",ARR:null,TABLE:null,MN:null,WN:null,SELECT:null,TADAY:newDate(),TADAY_C:"taday",ROWLEN:7,VALUE:null},
creatTable:function(){with(this){
vartable="<tableheight=100%width=100%><tr>"
for(vari=0;i<data.ROWLEN;i++){vart=data.WN[i]||"";table+="<th>"+t+"</th>";}
for(variindata.ARR){varshowText=data.ARR[i]||"",br=i%data.ROWLEN,title,css="";
if(!br){table+="</tr><tr>"};
data.ARR[i]?title=data.Y+"-"+data.M+"-"+showText:title="";
if(String(data.D)==String(data.ARR[i])){css+=""+data.YMD_C;}
if(data.YMD.getFullYear()==data.TADAY.getFullYear()&&data.YMD.getMonth()==data.TADAY.getMonth()&&String(data.TADAY.getDate())==String(data.ARR[i])){css=""+data.TADAY_C}
table+="<tdtitle=""+title+""class="+css+">"+showText+"</td>";
}table+="</tr></table>"
data.TABLE=table;returntable;
}},
calendarStarArr:function(userY,userM,userD){with(this){
varArr=[];
varnow=newDate(userY,userM,userD);
varLastDay=now.getLastDay();
varFirstDayofWeek=now.FirstDayofWeek();
data.YMD=now;data.Y=now.getFullYear();
data.M=now.getMonth()+1;data.D=now.getDate();data.W=now.getDay();
while(Arr.length!=FirstDayofWeek){Arr.push(false)}
for(vari=0;i<LastDay;i++){Arr.push(i+1)}
while(Arr.length%data.ROWLEN!=0){Arr.push(false)}
data.ARR=Arr;returnArr;
}},
calendarChange:function(userY,userM,userD){with(this){
calendarStarArr(userY,userM,userD);creatTable()
}},
calendarStar:function(userY,userM,userD){with(this){
data.MN=["零","一","二","三","四","五","六","七","八","九","十","十一","十二"];
data.WN=["日","一","二","三","四","五","六"];
calendarChange(userY,userM,userD);
}},
init:function(){with(this){
Date.prototype.getLastDay=function(){return(newDate(this.getFullYear(),this.getMonth()+1,0).getDate())}
Date.prototype.FirstDayofWeek=function(){return(newDate(this.getFullYear(),this.getMonth(),1).getDay())}
calendarStar(newDate().getFullYear(),newDate().getMonth(),newDate().getDate())
}}
}
</script>
<bodyid="body">
<tablewidth="100%"height="100%"border="0"cellspacing="0"cellpadding="0">
<trheight="10%">
<td><tablewidth="100%"height="100%"border="0"cellspacing="0"cellpadding="0"id="calendar_control">
<tr>
<thwidth="20%"align="left"scope="col">
<inputtype="button"title="上一年"value="<<"id="calendar_upY"/>
<inputtype="button"title="上一月"value="<"id="calendar_upM"/></th>
<thwidth="56%"id="calendar_str"scope="col"title="点击返回今天."></th>
<thwidth="24%"align="right"scope="col">
<inputtype="button"title="下一年"value=">>"id="calendar_dnY"/>
<inputtype="button"title="下一月"value=">"id="calendar_dnM"/></th>
</tr>
</table></td>
</tr>
<tr>
<tdheight="90%"id="calendar_body"></td>
</tr>
</table>
<script>
calendar.init()
functioncalendarChange(){
varcalendar_body=document.getElementById("calendar_body")
calendar_body.innerHTML=calendar.T()//显示表格
varcalendar_str=document.getElementById("calendar_str")
calendar_str.innerHTML=calendar.STR()//显示日期字符串
calendarControl()//调用日历控制
}
calendarChange()//日历更新
functioncalendarControl(){
varcalendar_str=document.getElementById("calendar_str")
calendar_str.onclick=function(){calendar.init();calendarChange()}//返回今天功能实现
varcalendar_dnY=document.getElementById("calendar_dnY")
calendar_dnY.onclick=function(){calendar.dnY();calendarChange()}//下一年功能实现
varcalendar_dnM=document.getElementById("calendar_dnM")
calendar_dnM.onclick=function(){calendar.dnM();calendarChange()}//下一月功能实现
varcalendar_upY=document.getElementById("calendar_upY")
calendar_upY.onclick=function(){calendar.upY();calendarChange()}//上一年功能实现
varcalendar_upM=document.getElementById("calendar_upM")
calendar_upM.onclick=function(){calendar.upM();calendarChange()}//上一月功能实现
varcalendar_day=document.getElementById("calendar_body").getElementsByTagName("td");
for(variincalendar_day){calendar_day[i].onclick=function(){varN=Number(this.innerText);if(N){calendar.day(N);calendarChange()}}}//当天日期功能实现
}
</script>
</body>
</html>

相关文章