/*---------------------------------------------------//
              封装的日历JS插件 V1.0
  
          作者:   星月8988
  
         CSDN:   8988
         
         BLOG:   hi.baidu.com/xy8988
         
         EMAIL: xyue1288@163.com

         声明:   本函数仅供学习研究,商业引用请与作者联系

// -----------封装的日历JS插件使用说明------------//
一. 调用:<script>ShowCalendar()</ script>

二. 网页调用方法:
1. 加入CSS样式:

边框颜色
.bordercolor{background-color:#CCCCCC;}
日期单元颜色
.cellcolor{background-color:#FFFFFF;}
标题栏颜色
.titlecolor { background-color: #FFFFFF; font-size: 10pt; font-weight: bold }
当前日期颜色
.todaycolor { background-color: #F0F0F0; border-left: 2 solid #C0C0C0; 
               border-right: 2 solid #808080; border-top: 2 solid #C0C0C0; 
               border-bottom: 2 solid #808080 }
每行高度
.cellheight{height:30px;font-size:9pt}


2.用<script src=ShowCalendar.js></ script>载入本代码
(保证在调用之前载入,最好在body前)

三.特点:
1.可在同一网页下调用多个日历

2.使用非常方便,只需在要显示的位置插入本函数调用即可.

/*--------------------------------------------------*/ 

function ShowCalendar(){

//============事件子函数=============

//鼠标移上处理
function onMouseover(){
   var el=event.srcElement;
   el.style.color='red';
};
//鼠标移开处理
function onMouseout(){
   var el=event.srcElement;
   el.style.color='';
}
//鼠标单击处理
function onClick(){ 
   var el=event.srcElement;
   if(el.name=="OFF"){
    setDisplayMode();
    return;
   }
   if(el.name=="restore"){
    today=new Date();
    Show();
    return;
   }
   if(el.tagName=="A"){
    newDate();
    return;
   }
}
//==============控制子函数=================

function setDisplayMode(){
   layerId.all.HID.style.display=layerId.all.HID.style.display=="none"?"":"none";
   layerId.all.CTL[0].innerText=layerId.all.HID.style.display=="none"?"打开设置":"关闭设置";

}

function newDate(){
   var el=event.srcElement;
   var yy=today.getFullYear();
   var mm=today.getMonth();
   var dd=today.getDate();
  
   if (el.name=="y1")    yy--;
   else if (el.name=="y2") yy++;
   else if (el.name=="m1") mm--;
   else if (el.name=="m2") mm++;
  
   today=new Date(yy,mm,dd);
   Show();
}


//===============计算子函数==================

function to2byte(content){//返回显示两位数字的数
   return content>9?content:"0"+content;
}

function getYYMMDD(dateobj){//返回YY年MM月DD日格式日期串
   return dateobj.getFullYear()+"年"+to2byte(dateobj.getMonth()+1)+"月"+to2byte(dateobj.getDate())+"日";
}

//=============== 添加默认样式 ===================
// 当用户未设置自定义的样式时

function SetDefalutStyle(){
   var sy=document.styleSheets(0).rules;
   var stylename=/\.(bordercolor|cellcolor|titlecolor|todaycolor|cellheight|cellheight)/
   var s=document.styleSheets[0].rules[0].style.selectorText
}

//=============== 显示子函数 ================

function Show(){//按today指定日期刷新日历
   var i,j,k;
   var yy=today.getFullYear(); //取年份
   var mm=today.getMonth();//取月编号(0-11)
    var dd=today.getDate(); //取当前日期
  
   var days=(new Date(yy,mm,31).getDate()==31?31:31-new Date(yy,mm,31).getDate());//计算本月天数
   layerId.all.YYMMDD.innerText=today.toLocaleString().split(/\x20/)[0];
   layerId.all.WW.innerText=week.substr(today.getDay(),1);

   layerId.all.YR.innerText=yy;
   layerId.all.MN.innerText=to2byte(mm+1);
  
   var k=1-new Date(yy,mm,1).getDay();//计算表中第1天偏移值
   for (j=2;j<8;j++){
    for(i=0;i<7;i++,k++) {
     if(j==7 && i>1) break; //如果是最后一行,则只保留前2格为日期单元
     layerId.rows[j].cells[i].innerText=(k<1 || k>days)?" ":k; //更新日期单元
     layerId.rows[j].cells[i].className=k==dd?"todaycolor":"cellcolor";
    }
   }

} 

function ShowTime(){//显示时间
   var d=new Date();
   var nowDate=getYYMMDD(d);
  
   if (oldDate!=nowDate) {today=d;Show();}
  
   layerId.all.HMS.innerText=d.toLocaleString().split(/\x20/)[1]; //相同时,更新时间显示
   oldDate=nowDate; //记住本次时间

   if (typeof(retInterval)!="number") retInterval=setInterval(ShowTime,1000); 
}


//================= 初始化设置 =======================

var retInterval=null;
var i,j;
var week="日一二三四五六";
var rndid="LayerCalendar"+Math.ceil(Math.random()*9000+999);//为打开多个日历产生随机ID

var s="<table id="+rndid+" class=bordercolor border=0 width=100% cellspacing=1 cellpadding=0><tr class=cellheight>";
s+="<td colspan=7 align=center class=titlecolor><a id=YYMMDD></a>&nbsp;&nbsp;星期<a id=WW></a></td></tr><tr class=cellheight>";

for(i=0;i<7;i++) s+="<td width="+(i>5?15:14)+"% class=titlecolor align=center>"+week.substr(i,1)+"</td>";

for(j=0;j<5;j++){
   s+="</tr><tr class=cellheight>";
   for(i=0;i<7;i++) s+="<td class=cellcolor align=center>"+(j*7+i)+"</td>";
}

s+="</tr><tr class=cellheight><td class=cellcolor align=center>&nbsp;</td><td class=cellcolor align=center>&nbsp;</td>";
s+="<td colspan=3 class=cellcolor align=center><a id=HMS>&nbsp;</a></td><td colspan=2 class=cellcolor align=center><span name=OFF id=CTL>打开设置</span></td></tr>";

//以下是日期时间设置栏
s+="<tr id=HID class=cellheight style=display:none><td colspan=7 align=center class=cellcolor>";
s+="<a name=y1 id=CTL>3</a><span id=YR>YY</span>年<a name=y2 id=CTL>4</a>&nbsp;&nbsp;&nbsp;";
s+="<a name=m1 id=CTL>3</a><span id=MN>MM</span>月<a name=m2 id=CTL>4</a>&nbsp;&nbsp;&nbsp;";
//s+="<a name=d1 id=CTL>3</a><span id=DY>DD</span>日<a name=d2 id=CTL>4</a>&nbsp;&nbsp;&nbsp;"
s+="<font name=restore id=CTL title='恢复当前系统日期'>复位</font>"; 

s+="<hr>花都设计制作：<a href='http://www.cnbaba.com/index.asp' target=_blank title='激动网络 Copyright &copy; 2008 www.cnbaba.com All rights reserved'>花都网站建设</a></td></tr></table>" //表格结束

document.write (s); 

var layerId=eval(rndid); //取得外框TABLE对象
var today=new Date();

var el=layerId.all.CTL;
for (i=0;i<el.length;i++){
   el[i].style.cursor='hand';   //定义鼠标指针为手形
   el[i].onmouseover=onMouseover; //定义鼠标移上效果处理
   el[i].onmouseout=onMouseout; //定义鼠标移开效果处理
   el[i].onclick=onClick;    //定义鼠标单击处理
   if (el[i].tagName=="A") {
    el[i].style.fontFamily="Webdings"; //为显示调整按钮设置字体
    el[i].style.fontSize="16px";
   }
}
layerId.onselectstart =function(){return false} //屏蔽选择


Show();
var oldDate=getYYMMDD(today);
ShowTime();
}
function loading(){
  document.getElementById('loading').style.display='none';
  document.getElementById('loadend').style.display='block';
}