栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

js日历功能对象

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

js日历功能对象

需求产生问题:本来想在网上找个js代码,可是发现要么太复杂,要么不好控制,要么兼容性不好......
问题分析: 发现不是优秀的就是最好的.... 适合自己的就是最好的。
问题解决: 决定自己写一个日历 功能。
代码呈现:
日历主程序
复制代码 代码如下:
var calendar={
STR:function(){with(this.data)return ""+Y+"年,"+M+"月,"+D+"号,星期"+WN[W];},
V:function(o,spli,sx){with(this)return o[sx]=""+data.Y+spli+data.M+spli+data.D},
T:function(){with(this)return data.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:new Date(),TADAY_C:"taday",ROWLEN:7,VALUE:null},
creatTable:function(){with(this){
var table=""
for(var i=0;i"+t+"";}
for(var i in data.ARR){var showText=data.ARR[i]||" ",br=i%data.ROWLEN,title,css;
if(!br){table+="
"};
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+="";
}table+="
"+showText+"
"
data.TABLE=table;return table;
}},
calendarStarArr:function(userY,userM,userD){with(this){
var Arr=[];
var now = new Date(userY,userM,userD);
var LastDay = now.getLastDay();
var FirstDayofWeek = 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(var i=0;iwhile(Arr.length%data.ROWLEN!=0){Arr.push(false)}
data.ARR=Arr;return Arr;
}},
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(new Date(this.getFullYear(),this.getMonth()+1,0).getDate())}
Date.prototype.FirstDayofWeek=function(){return(new Date(this.getFullYear(),this.getMonth(),1).getDay())}
calendarStar(new Date().getFullYear(),new Date().getMonth(),new Date().getDate())
}}
}

代码应用讲解:
复制代码 代码如下:
var aa=new calendar()//创建一个新日历
aa.init()//日历初始

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

这个日历对象实现的是日历的核心功能功能,
具体是日历放在哪里,
哪个事件触发哪个函数这个我没有写,
要是那样的话就失去我写这个日历的原有目的了。
怎么大家都没反应,我弄个例子,大家看下吧
复制代码 代码如下:



js日历效果-wangzf


html,body{height:100%;width:100%;}
*{margin:0;padding:0;}
.calendarBox{width:100%;}
#calendar_control{background:#a3a3b4;}
#calendar_control input{min-width:inherit;}
#calendarBox{width:100%;height:100%;}
#calendar_str{cursor:pointer;text-align:center;font-weight:lighter;}
#calendar_body td{background:#f0f0f0;cursor:pointer;}
#calendar_body td.taday{background:#0CF;}
#calendar_body td.hot{background:#FF6;}
#calendar_body th{background:#3f526f;color:#fff;}
#calendar_body td,#calendar_body th{text-align:center;}
























转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/113363.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号