js 实现日历显示+农历+节假日+移动显示边框+兼容IE 谷歌火狐

最新推荐文章于 2023-12-01 02:17:51 发布

zxm1228

最新推荐文章于 2023-12-01 02:17:51 发布

阅读量636

点赞数

文章标签： IE 中国移动 C C++ C#

本文链接：https://blog.csdn.net/zxm1228/article/details/83950641

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<title></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:2px ;}
#cal{width:536px;border:2px 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:76px;text-align:center;line-height:25px;list-style:none;font-size:18px;background:#CFDBEC;}
#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:50px;height:36px;text-align:center;margin:0 0 0 9px}
#cal #cm .cell .so{font:bold 18px 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:185px}
#cal #fd b{font-weight:normal;color:#c60a00}
</style>

<div id="cal">
<div id="top">公元
<button style="border:1px solid ; px;width:15px; height:20px;cursor:pointer"><<</button> <select>
</select> <button style="border:1px solid;width:15px; height:20px;cursor:pointer">>></button>
年
<button style="border:1px solid ; px;width:15px; height:20px;cursor:pointer"><<</button> <select>
</select> <button style="border:1px solid ; px;width:15px; height:20px;cursor:pointer">>></button>
月农历<span></span>年 [ <span></span>年 ]
<input type="button" value="回到今天" title="点击后跳转回今天" style="padding:0px">
</div>
<ul id="wk">
<li><b>日</b></li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</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];
var UY=M("top").getElementsByTagName("button")[0];
var DY=M("top").getElementsByTagName("button")[1];
var UM=M("top").getElementsByTagName("button")[2];
var DM=M("top").getElementsByTagName("button")[3];

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 updateTime(temp){
switch(temp){
case 'UY':
if(C.value==1901)C.value=2049;
else C.value--;
break;
case 'DY':
if(C.value==2049)C.value=1901;
else C.value++;
case 'UM':
if(X.value==1)X.value=12;
else X.value--;
break;
case 'DM':
if(X.value==12)X.value=1;
else X.value++;
break;
}
f();
}
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.οnchange=f;
X.οnchange=f
} function e(g){
d(g.solarYear,g.solarMonth);
G.innerHTML=g.ganzhiYear;
c.innerHTML=g.shengxiao;
UY.οnclick=(function (){updateTime('UY')});
DY.οnclick=(function (){updateTime('DY')});
UM.οnclick=(function (){updateTime('UM')});
DM.οnclick=(function (){updateTime('DM')});;
Y.οnclick=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+1)*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"
}
var nmb=(function ()
{
var date=c[a].solarDate;
var year=M("top").getElementsByTagName("SELECT")[0].value;//年
var month=M("top").getElementsByTagName("SELECT")[1].value;//月;
var keystr = "622503514624";
var deltmonth = parseInt(keystr.substr(month-1,1));
var deltyear = (year-2000)+Math.ceil((year-2000)/4);
deltyear += (year-Math.floor(year/4)*4==0 && month >2 ? 1:0);
var deltdate = date-1;
return (deltmonth+deltyear+deltdate) - Math.floor((deltmonth+deltyear+deltdate)/7)*7;
})() ;

//c[a].solarDate 天数;
X.className="cell";
X.style.left=((nmb))*77+"px";
X.style.top=Math.floor((a+1)/7)*38+2+"px";
var b=R("DIV");
b.className="so";
// http://www.codefans.net

b.style.color=(nmb==6||nmb==0)?"#c60b02":"#313131";
b.innerHTML=c[a].solarDate;
X.appendChild(b);
X.id=c[a].solarDate;//给div加id
var divid=c[a].solarDate;
X.style.cursor='pointer';
X.οnclick=(function (){
alert("当前div id 是："+this.id );//
});
var Y=R("DIV");
Y.style.color="#666";
Y.style.cursor='pointer';
Y.innerHTML=c[a].showInLunar;
X.appendChild(Y);
X.οnmοuseοver=(function(d){
return function(f){
this.style.border="2px solid #B12C2C";//鼠标移上显示边框
F.show({
dateIndex:d,cell:this
} )
}
} )(a);
X.οnmοuseοut=function(){
this.style.border="";//鼠标移出隐藏边框
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-40+"px";
C.style.left=Z.offsetLeft+Z.offsetWidth+1+"px";
C.style.display="block"
C.οnmοuseοver=(function (){C.style.display="block";Z.style.border="2px solid #B12C2C";});
C.οnmοuseοut=(function (){C.style.display="none";Z.style.border="";});
} 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>

zxm1228

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现日历显示+农历+节假日+移动显示边框+兼容IE 谷歌火狐

New Document body,td,.p1,.p2,.i{font-family:arial}body{margin:6px 0 0 0;background-color:#fff;color:#000;}table{border:2px ;}...
复制链接

扫一扫