百度用到的Js日历大家可以看看

更新时间：2009年10月24日 11:48:55 作者：

本JavaScript日历是从百度网站里整理出来的，费了很大劲，因为感觉这个日历简直太棒了，没有使用任何的外部文件，全部是HTML代码和Javascirpt实现。

而且日历功能很强大，带有节日、农历等，运行看效果就明白了，相信不会让您失望的。

<title>百度的Js日历，值得一看</title> <table cellpadding="0" cellspacing="0" id="1"> <tr> <td><style> body,td,.p1,.p2,.i{font-family:arial} body{margin:6px 0 0 0;background-color:#fff;color:#000;} table{border:0} #cal{width:434px;border:1px solid #c3d9ff;font-size:12px;margin:8px 0 0 15px} #cal #top{height:29px;line-height:29px;background:#e7eef8;color:#003784;padding-left:70px} #cal #top select{font-size:12px} #cal #top input{padding:0} #cal ul#wk{margin:0;padding:0;height:25px} #cal ul#wk li{float:left;width:60px;text-align:center;line-height:25px;list-style:none} #cal ul#wk li b{font-weight:normal;color:#c60b02} #cal #cm{clear:left;border-top:1px solid #ddd;border-bottom:1px dotted #ddd;position:relative} #cal #cm .cell{position:absolute;width:42px;height:36px;text-align:center;margin:0 0 0 9px} #cal #cm .cell .so{font:bold 16px arial;} #cal #bm{text-align:right;height:24px;line-height:24px;padding:0 13px 0 0} #cal #bm a{color:7977ce} #cal #fd{display:none;position:absolute;border:1px solid #dddddf;background:#feffcd;padding:10px;line-height:21px;width:150px} #cal #fd b{font-weight:normal;color:#c60a00} </style>  <div id="cal"> <div id="top">公元&nbsp; <select> </select> &nbsp;年&nbsp; <select> </select> &nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;农历<span></span>年&nbsp;[&nbsp;<span></span>年&nbsp;]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" value="回到今天" title="点击后跳转回今天" style="padding:0px"> </div> <ul id="wk"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li><b>六</b></li> <li><b>日</b></li> </ul> <div id="cm"></div> <div id="bm"></div> </div></td> </tr> </table> <script type="text/javascript"> 0||c.solarMonth!=a.solarMonth){ X.dateArray[e]=null; continue } var b=new U(new Date()); if(c.solarYear==b.solarYear&&c.solarMonth==b.solarMonth&&c.solarDate==b.solarDate){ c.isToday=true } X.dateArray[e]=c; c=new U(C(c.date,1)); f-- } } return{ init:function(a){ Z(a) } ,getJson:function(){ return X } } } )(); var W=(function(){ var C=M("top").getElementsByTagName("SELECT")[0]; var X=M("top").getElementsByTagName("SELECT")[1]; var G=M("top").getElementsByTagName("SPAN")[0]; var c=M("top").getElementsByTagName("SPAN")[1]; var Y=M("top").getElementsByTagName("INPUT")[0]; function a(g){ G.innerHTML=g.ganzhiYear; c.innerHTML=g.shengxiao } function b(g){ C[g.solarYear-1901].selected=true; X[g.solarMonth-1].selected=true } function f(){ var j=C.value; var g=X.value; var i=new U(new Date(j,g-1,1)); Q.init(i); N.draw(); if(this==C){ i=new U(new Date(j,3,1)); G.innerHTML=i.ganzhiYear; c.innerHTML=i.shengxiao } var h=new U(new Date()); Y.style.visibility=(j==h.solarYear&&g==h.solarMonth)?"hidden":"visible" } function Z(){ var g=new U(new Date()); a(g); b(g); Q.init(g); N.draw(); Y.style.visibility="hidden" } function d(k,g){ for(var j=1901;j<2050;j++){ var h=R("OPTION"); h.value=j; h.innerHTML=j; if(j==k){ h.selected="selected" } C.appendChild(h) } for(var j=1;j<13;j++){ var h=R("OPTION"); h.value=j; h.innerHTML=j; if(j==g){ h.selected="selected" } X.appendChild(h) } C.onchange=f; X.onchange=f } function e(g){ d(g.solarYear,g.solarMonth); G.innerHTML=g.ganzhiYear; c.innerHTML=g.shengxiao; Y.onclick=Z; Y.style.visibility="hidden" } return{ init:function(g){ e(g) } ,reset:function(g){ b(g) } } } )(); var N=(function(){ function C(){ var Z=Q.getJson(); var c=Z.dateArray; M("cm").style.height=Z.lines*38+2+"px"; M("cm").innerHTML=""; for(var a=0;a<c.length;a++){ if(c[a]==null){ continue } var X=R("DIV"); if(c[a].isToday){ X.style.border="1px solid #a5b9da"; X.style.background="#c1d9ff" } X.className="cell"; X.style.left=(a%7)*60+"px"; X.style.top=Math.floor(a/7)*38+2+"px"; var b=R("DIV"); b.className="so"; // https://www.jb51.net b.style.color=((a%7)>4||c[a].isRest)?"#c60b02":"#313131"; b.innerHTML=c[a].solarDate; X.appendChild(b); var Y=R("DIV"); Y.style.color="#666"; Y.innerHTML=c[a].showInLunar; X.appendChild(Y); X.onmouseover=(function(d){ return function(f){ F.show({ dateIndex:d,cell:this } ) } } )(a); X.onmouseout=function(){ F.hide() } ; M("cm").appendChild(X) } var G=R("DIV"); G.id="fd"; M("cm").appendChild(G); F.init(G) } return{ draw:function(G){ C(G) } } } )(); var F=(function(){ var C; function Y(e,c){ if(arguments.length>1){ var b=/([.*+?^=!:${}()|[\]\/\\])/g,Z="{".replace(b,"\\$1"),d="}".replace(b,"\\$1"); var a=new RegExp("#"+Z+"([^"+Z+d+"]+)"+d,"g"); if(typeof (c)=="object"){ return e.replace(a,function(f,h){ var g=c[h]; return typeof (g)=="undefined"?"":g } ) } } return e } function G(b){ var a=Q.getJson().dateArray[b.dateIndex]; var Z=b.cell; var c="#{solarYear}&nbsp;年&nbsp;#{solarMonth}&nbsp;月&nbsp;#{solarDate}&nbsp;日&nbsp;#{solarWeekDayInChinese}"; c+="<br><b>农历&nbsp;#{lunarMonthInChinese}月#{lunarDateInChinese}</b>"; c+="<br>#{ganzhiYear}年&nbsp;#{ganzhiMonth}月&nbsp;#{ganzhiDate}日"; if(a.solarFestival!=""||a.lunarFestival!=""||a.jieqi!=""){ c+="<br><b>#{lunarFestival} #{solarFestival} #{jieqi}</b>" } C.innerHTML=Y(c,a); C.style.top=Z.offsetTop+Z.offsetHeight-5+"px"; C.style.left=Z.offsetLeft+Z.offsetWidth-5+"px"; C.style.display="block" } function X(){ C.style.display="none" } return{ show:function(Z){ G(Z) } ,hide:function(){ X() } ,init:function(Z){ C=Z } } } )(); var A=new U(new Date()); if(S){ window.attachEvent("onload",function(){ W.reset(A) } ) } W.init(A); Q.init(A); N.draw(); } )(); //--> </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

Js
日历

用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
在页面初始化时，用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。格式化为yyyy年MM月dd日 HH时mm分ss秒，大家可以参考下代码，自由发挥下。
2009-08-08
一个简单横向javascript日期控件
2007-12-12
javascript 日历提醒系统( 兼容所有浏览器 )
日历提醒插件（纯 javascript + css 打造，不含各类添加剂）代码比较精简，数据可以从数据库中读取。
2009-04-04
获取客户端电脑日期时间js代码(jquery)
在js或jquery中获取客户端的日期时间都是非常简单的，下面我们来看看它们分别介绍吧
2012-09-09
利用毫秒减值计算时长的js代码
刚写的一个利用毫秒减值计算时长的小方法。使用方法：var duration=MsToDuration(ms)
2013-09-09
用js计算页面执行时间的函数
用js计算页面执行时间的函数...
2006-12-12
农历与西历对照
这篇文章主要介绍了农历与西历对照,需要的朋友可以参考下
2006-09-09
Date对象格式化函数代码
Date对象格式化方法，需要的朋友可以参考下。
2010-07-07
一个简单的日历代码 (For: FF1+ IE5+ Opr7+)测试
一个简单的日历代码 (For: FF1+ IE5+ Opr7+)测试...
2007-03-03
javascript 倒计时代码
思路什么的都不错，跟以前的代码不同，也是值得学习的。
2009-12-12