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

2019-11-21 01:03:02

字体：大中小

来源：转载

供稿：网友

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

<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">公元  <select> </select>  年  <select> </select>  月    农历<span></span>年 [ <span></span>年 ]       <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"; // //www.VeVB.COm 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} 年 #{solarMonth} 月 #{solarDate} 日 #{solarWeekDayInChinese}"; c+="<br><b>农历 #{lunarMonthInChinese}月#{lunarDateInChinese}</b>"; c+="<br>#{ganzhiYear}年 #{ganzhiMonth}月 #{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需刷新才能执行]

上一篇：CSS 渐变背景的6个演示代码

下一篇：CSS 伪类实现的鼠标滑动图片链接