仿百度纯JS日历带农历-网页特效-懒人建站

仿百度纯JS日历带农历

关键字：

仿百度纯JS日历而且日历功能很强大，带有节日和农历。

<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.codefans.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}</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>

代码说明:

仿百度全部是HTML代码和Javascirpt实现，而且日历功能很强大，带有节日、农历。

TAG标签

弹出层 jQuery 图片展示下拉菜单左右滚动选项卡二级导航 jQuery弹出层

来源：懒人建站|发布人：懒人建站|2009-10-27|热度：次|收藏|报错

仿百度纯JS日历 带农历

代码说明:

TAG标签

懒人建站

仿百度纯JS日历带农历