javascript 漂亮實用的萬年曆代碼

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

提示：您可以先修改部分代碼再運行

javascript 漂亮實用的萬年曆代碼<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>漂亮實用的萬年曆</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">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></head><body><table cellpadding="0" cellspacing="0" id="1"> <tr> <td> <div id="cal"> <div id="top">公元 <select> </select> 年 <select> </select> 月農曆<span></span>年 [ <span></span>年 ] <input type="button" value="回到今天" title="點擊後跳回今天" > </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";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></body></html>

提示：您可以先修改部分代碼再運行

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More