js日历功能对象

2024-12-12 05:15:24

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

代码如下:

代码应用讲解：

代码如下:

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 需要传一个数值型参数)

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

代码如下:

<html>
<head>
<meta http-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_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;}
</style>
<script>
var calendar={
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)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="<table height=100% width=100%><tr>"
for(var i=0;i<data.ROWLEN;i++){var t=data.WN[i]||" ";table+="<th>"+t+"</th>";}
for(var i in data.ARR){var showText=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+="<td title='"+title+"' class="+css+">"+showText+"</td>";
}table+="</tr></table>"
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;i<LastDay;i++){Arr.push(i+1)}
while(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())
}}
}
</script>
<body id="body">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="10%">
<td><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" id="calendar_control">
<tr>
<th width="20%" align="left" scope="col">
<input type="button" title="上一年" value="<<" id="calendar_upY" />
<input type="button" title="上一月" value="<" id="calendar_upM" /></th>
<th width="56%" id="calendar_str" scope="col" title="点击返回今天."></th>
<th width="24%" align="right" scope="col">
<input type="button" title="下一年" value=">>" id="calendar_dnY" />
<input type="button" title="下一月" value=">" id="calendar_dnM" /></th>
</tr>
</table></td>
</tr>
<tr>
<td height="90%" id="calendar_body"></td>
</tr>
</table>
<script>
calendar.init()
function calendarChange(){
var calendar_body=document.getElementById("calendar_body")
calendar_body.innerHTML=calendar.T()//显示表格
var calendar_str=document.getElementById("calendar_str")
calendar_str.innerHTML=calendar.STR()//显示日期字符串
calendarControl()//调用日历控制
}
calendarChange()//日历更新
function calendarControl(){
var calendar_str=document.getElementById("calendar_str")
calendar_str.onclick=function(){ calendar.init();calendarChange()}//返回今天功能实现
var calendar_dnY=document.getElementById("calendar_dnY")
calendar_dnY.onclick=function(){ calendar.dnY();calendarChange()}//下一年功能实现
var calendar_dnM=document.getElementById("calendar_dnM")
calendar_dnM.onclick=function(){ calendar.dnM();calendarChange()}//下一月功能实现
var calendar_upY=document.getElementById("calendar_upY")
calendar_upY.onclick=function(){ calendar.upY();calendarChange()}//上一年功能实现
var calendar_upM=document.getElementById("calendar_upM")
calendar_upM.onclick=function(){ calendar.upM();calendarChange()}//上一月功能实现
var calendar_day=document.getElementById("calendar_body").getElementsByTagName("td");
for(var i in calendar_day){calendar_day[i].onclick=function(){var N=Number(this.innerText);if(N){calendar.day(N);calendarChange()}}}//当天日期功能实现
}
</script>
</body>
</html>

简约JS日历控件实例代码

运行结果如下: 复制代码代码如下: <script type="text/javascript" language="javascript">function choose_date_czw(date_id,objtd){if(date_id=="choose_date_czw_close"){ document.getElementByIdx_x_x("choose_date_czw_id").style
轻量级的原生js日历插件calendar.js使用指南

使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤本日历插件支持cmd模块化如下调用: 复制代码代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式默认'YYYY-
简单JavaScript日历及详细说明

效果图:测试代码: calendar2 #calendar{ background:#000; color:#FFF; font-size:0.8em; } #tittle{ font-size:1.4em; padding:4px 0.55em; } #days th { font-weight:bold; text-align:center; padding:4px 0.55em; } #calendar td{ text-align:center; padding:4px 0.55em;
JavaScript制作简单的日历效果

本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> </head> <body> <script> document.write("<table>"); document.write("<th colspan='7'>
js日历控件（可精确到分钟）

.menu_iframe{position:absolute; visibility:inherit; top:0px; left:0px; width:170px; z-index:-1; filter: Alpha(Opacity=0);} .cal_table{ border:#333333 solid 1px; border-collapse:collapse; background:#ffffff; font-size:12px} .cal_table td{ border:1px #
JS日历推荐

两年前写过一个日历,可是兼容性不好. 这次重新写了一次. 兼容多种浏览器了解了不少东东,特别是对于W3C标准化．如 FF和IE 对box模型的理解不同 box.style{width:100;border 1px;} ie理解为 box.width = 100 ff 理解为 box.width = 100 + 1*2 = 102 可以使用这种方法使两种浏览器都可以正常浏览 box.style{width:100!important; width /**/:120px;bo
JS学习之一个简易的日历控件

这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo
修改js Calendar日历控件兼容IE9/谷歌/火狐

修改Calendar日历控件兼容IE9,谷歌,火狐. 只是能用,出现的位置有所不同,希望有高手再帮我改改吧,谢谢一. 复制代码代码如下: this.iframe = window.frames("meizzCalendarIframe"); 修改为复制代码代码如下: this.iframe = window.frames["meizzCalendarIframe"]; 二. 复制代码代码如下: var a = (arguments.length==0)
纯js简单日历实现代码

复制代码代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)

应为要有交互,选择了Js来实现,也算是结对编程的初试吧. 我将显示部分用html 写好,点击的按钮触发事件函数是check(): 复制代码代码如下: function onCheck(){ var Year = document.getElementById("year").value; //获取文本框的"年" var theYear =Year * 1; //转换为number类型 //alert(theYear); // 获取月值 var month =

js日历功能对象

相关推荐

随机推荐