js 漂亮实用的万年历 / iVAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>js 漂亮实用的万年历</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="点击后跳转回今天" 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";
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>

时间： 2024-10-03 15:06:34

js 漂亮实用的万年历

js 漂亮实用的万年历的相关文章

javascript 漂亮实用的万年历代码

Css3+Js 漂亮时钟

漂亮实用的js提示框插件SweetAlert用法

jQuery EasyTabs.js简单实用Tabs插件

js 根目录:实用技巧：在JS应用中定义上下文根目录变量

ASP.NET 页面刷新的实现方法(包括html,js)_实用技巧

asp.net jquery无刷新分页插件(jquery.pagination.js)_实用技巧

给Blog添个漂亮实用的计数器

js 简单实用的点击可显隐层效果