Heim > Artikel > Web-Frontend > 百度用到的Js日历大家可以看看_时间日期

百度用到的Js日历大家可以看看_时间日期

WBOYOriginal: 2016-05-16 18:43:401615Durchsuche

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

<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需刷新才能执行]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：javascript Keycode对照表_基础知识Nächster Artikel：CSS 伪类实现的鼠标滑动图片链接_导航菜单

In Verbindung stehende Artikel

Mehr sehen

百度用到的Js日历 大家可以看看_时间日期

In Verbindung stehende Artikel

百度用到的Js日历大家可以看看_时间日期