Home > Article > Web Front-end > You can take a look at the Js calendar used by Baidu_time and date

You can take a look at the Js calendar used by Baidu_time and date

WBOYOriginal: 2016-05-16 18:43:401614browse

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

<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"; 
// http://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} 年 #{solarMonth} 月 #{solarDate} 日 #{solarWeekDayInChinese}"; 
c+="<br><b>农历 #{lunarMonthInChinese}月#{lunarDateInChinese}"; 
c+="<br>#{ganzhiYear}年 #{ganzhiMonth}月 #{ganzhiDate}日"; 
if(a.solarFestival!=""||a.lunarFestival!=""||a.jieqi!=""){ 
c+="<br><b>#{lunarFestival} #{solarFestival} #{jieqi}" 
} 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需刷新才能执行]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javascript Keycode comparison table_basic knowledgeNext article：javascript Keycode comparison table_basic knowledge

See more

You can take a look at the Js calendar used by Baidu_time and date

Related articles