【javascript学习指南】javascript日历效果代码(支持农历,星期，年份)

更新时间：2018-03-04 来源：php常用代码手机版 字体：大中小

【www.bbyears.com--php常用代码】

提示：您可以先修改部分代码再运行

<title>javascript日历</title> 
 
 
<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> 
 
 
公元  
<select> 
</select> 
 年  
<select> 
</select> 
 月    农历年 [ 年 ]       
<input type="button" value="回到今天" title="点击后跳转回今天" style="padding:0px"> 
 
<ul id="wk"> 
一 
二 
三 
四 
五 
<b>六</b> 
<b>日</b> 
 
 
 
 
 
 
<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>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/jiaocheng/39686.html

链接：http://www.bbyears.com/jiaocheng/39686.html
【javascript学习指南】javascript日历效果代码(支持农历,星期，年份)(转载时请注明本文出处及链接)

猜你感兴趣

【php多文件上传】php文件上传之php.ini配置上传文件详解 2018-03-04
[最新windows7激活密钥]最新windows7激活码整理放送 2018-03-04
【vi linux 用法】Linux中vi命令用法详解 2018-03-04
galaxy buds|Galaxy S4怎么为故事相册添加文字?（I9500,I9508,I959,I9502） 2018-03-04
readonly option is set_readonly和disabled区别详解 2018-03-04
【mysql登录提示密码错误】MySQL登录提示:#2002无法登录解决办法 2018-03-04
【mysql下载】MySQL Order by 语句用法与优化详解 2018-03-04
【设置了路由器但还是上不了网怎么办啊】设置了路由器但还是上不了网怎么办？ 2018-03-04
[健身文章]js文章内容中关键字相关右键菜单效果 2018-03-04
linux定时任务crontab_linux中crontab不能正常执行原因 2018-03-04

本类排行

本类最新

更多>>

【javascript学习指南】javascript日历效果代码(支持农历,星期，年份)

猜你感兴趣

热门标签

本类排行

本类最新