`
448278806
  • 浏览: 2507 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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

阅读更多
<!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>
<!--[if IE]>
<style>
#cal #top{padding-top:4px}
#cal #top input{width:65px}
#cal #fd{width:170px}
</style>
<![endif]-->
      <div id="cal">
        <div id="top">公元 &nbsp;&nbsp;
          <button style="border:1px solid ; px;width:15px; height:20px;cursor:pointer"><<</button>&nbsp;<select>
          </select>&nbsp;<button style="border:1px solid;width:15px; height:20px;cursor:pointer">>></button>
           &nbsp;年&nbsp;
           <button style="border:1px solid ; px;width:15px; height:20px;cursor:pointer"><<</button>&nbsp;<select>
          </select>&nbsp; <button style="border:1px solid ; px;width:15px; height:20px;cursor:pointer">>></button>
           月 &nbsp;&nbsp;   农历<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">

<!--
(function(){
var S=navigator.userAgent.indexOf("MSIE")!=-1&&!window.opera;
function M(C){
return document.getElementById(C)
} function R(C){
return document.createElement(C)
} var P=[19416,19168,42352,21717,53856,55632,91476,22176,39632,21970,19168,42422,42192,53840,119381,46400,54944,44450,38320,84343,18800,42160,46261,27216,27968,109396,11104,38256,21234,18800,25958,54432,59984,28309,23248,11104,100067,37600,116951,51536,54432,120998,46416,22176,107956,9680,37584,53938,43344,46423,27808,46416,86869,19872,42448,83315,21200,43432,59728,27296,44710,43856,19296,43748,42352,21088,62051,55632,23383,22176,38608,19925,19152,42192,54484,53840,54616,46400,46496,103846,38320,18864,43380,42160,45690,27216,27968,44870,43872,38256,19189,18800,25776,29859,59984,27480,21952,43872,38613,37600,51552,55636,54432,55888,30034,22176,43959,9680,37584,51893,43344,46240,47780,44368,21977,19360,42416,86390,21168,43312,31060,27296,44368,23378,19296,42726,42208,53856,60005,54576,23200,30371,38608,19415,19152,42192,118966,53840,54560,56645,46496,22224,21938,18864,42359,42160,43600,111189,27936,44448];
var K="甲乙丙丁戊己庚辛壬癸";
var J="子丑寅卯辰巳午未申酉戌亥";
var O="鼠牛虎兔龙蛇马羊猴鸡狗猪";
var L=["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"];
var D=[0,21208,43467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758];
var B="日一二三四五六七八九十";
var H=["正","二","三","四","五","六","七","八","九","十","十一","腊"];
var E="初十廿卅";
var V={
"0101":"*1元旦节","0214":"情人节","0305":"学雷锋纪念日","0308":"妇女节","0312":"植树节","0315":"消费者权益日","0401":"愚人节","0501":"*1劳动节","0504":"青年节","0601":"国际儿童节","0701":"中国GCD诞辰","0801":"建军节","0910":"中国教师节","1001":"*3国庆节","1224":"平安夜","1225":"圣诞节"
} ;
var T={
"0101":"*2春节","0115":"元宵节","0505":"*1端午节","0815":"*1中秋节","0909":"重阳节","1208":"腊八节","0100":"除夕"
} ;
function U(Y){
function c(j,i){
var h=new Date((31556925974.7*(j-1900)+D[i]*60000)+Date.UTC(1900,0,6,2,5));
return(h.getUTCDate())
} function d(k){
var h,j=348;
for(h=32768;h>8;h>>=1){
j+=(P[k-1900]&h)?1:0
} return(j+b(k))
} function a(h){
return(K.charAt(h%10)+J.charAt(h%12))
} function b(h){
if(g(h)){
return((P[h-1900]&65536)?30:29)
} else{
return(0)
}
} function g(h){
return(P[h-1900]&15)
} function e(i,h){
return((P[i-1900]&(65536>>h))?30:29)
} function C(m){
var k,j=0,h=0;
var l=new Date(1900,0,31);
var n=(m-l)/86400000;
this.dayCyl=n+40;
this.monCyl=14;
for(k=1900;k<2050&&n>0;k++){
h=d(k);
n-=h;
this.monCyl+=12
} if(n<0){
n+=h;
k--;
this.monCyl-=12
} this.year=k;
this.yearCyl=k-1864;
j=g(k);
this.isLeap=false;
for(k=1;k<13&&n>0;k++){
if(j>0&&k==(j+1)&&this.isLeap==false){
--k;
this.isLeap=true;
h=b(this.year)
} else{
h=e(this.year,k)
} if(this.isLeap==true&&k==(j+1)){
this.isLeap=false
} n-=h;
if(this.isLeap==false){
this.monCyl++
}
} if(n==0&&j>0&&k==j+1){
if(this.isLeap){
this.isLeap=false
} else{
this.isLeap=true;
--k;
--this.monCyl
}
} if(n<0){
n+=h;
--k;
--this.monCyl
} this.month=k;
this.day=n+1
} function G(h){
return h<10?"0"+h:h
} function f(i,j){
var h=i;
return j.replace(/dd?d?d?|MM?M?M?|yy?y?y?/g,function(k){
switch(k){
case"yyyy":var l="000"+h.getFullYear();
return l.substring(l.length-4);
case"dd":return G(h.getDate());
case"d":return h.getDate().toString();
case"MM":return G((h.getMonth()+1));
case"M":return h.getMonth()+1
}
} )
} function Z(i,h){
var j;
switch(i,h){
case 10:j="初十";
break;
case 20:j="二十";
break;
case 30:j="三十";
break;
default:j=E.charAt(Math.floor(h/10));
j+=B.charAt(h%10)
} return(j)
} this.date=Y;
this.isToday=false;
this.isRestDay=false;
this.solarYear=f(Y,"yyyy");
this.solarMonth=f(Y,"M");
this.solarDate=f(Y,"d");
this.solarWeekDay=Y.getDay();
this.solarWeekDayInChinese="星期"+B.charAt(this.solarWeekDay);
var X=new C(Y);
this.lunarYear=X.year;
this.shengxiao=O.charAt((this.lunarYear-4)%12);
this.lunarMonth=X.month;
this.lunarIsLeapMonth=X.isLeap;
this.lunarMonthInChinese=this.lunarIsLeapMonth?"闰"+H[X.month-1]:H[X.month-1];
this.lunarDate=X.day;
this.showInLunar=this.lunarDateInChinese=Z(this.lunarMonth,this.lunarDate);
if(this.lunarDate==1){
this.showInLunar=this.lunarMonthInChinese+"月"
} this.ganzhiYear=a(X.yearCyl);
this.ganzhiMonth=a(X.monCyl);
this.ganzhiDate=a(X.dayCyl++);
this.jieqi="";
this.restDays=0;
if(c(this.solarYear,(this.solarMonth-1)*2)==f(Y,"d")){
this.showInLunar=this.jieqi=L[(this.solarMonth-1)*2]
} if(c(this.solarYear,(this.solarMonth-1)*2+1)==f(Y,"d")){
this.showInLunar=this.jieqi=L[(this.solarMonth-1)*2+1]
} if(this.showInLunar=="清明"){
this.showInLunar="清明节";
this.restDays=1
} this.solarFestival=V[f(Y,"MM")+f(Y,"dd")];
if(typeof this.solarFestival=="undefined"){
this.solarFestival=""
} else{
if(/\*(\d)/.test(this.solarFestival)){
this.restDays=parseInt(RegExp.$1);
this.solarFestival=this.solarFestival.replace(/\*\d/,"")
}
} this.showInLunar=(this.solarFestival=="")?this.showInLunar:this.solarFestival;
this.lunarFestival=T[this.lunarIsLeapMonth?"00":G(this.lunarMonth)+G(this.lunarDate)];
if(typeof this.lunarFestival=="undefined"){
this.lunarFestival=""
} else{
if(/\*(\d)/.test(this.lunarFestival)){
this.restDays=(this.restDays>parseInt(RegExp.$1))?this.restDays:parseInt(RegExp.$1);
this.lunarFestival=this.lunarFestival.replace(/\*\d/,"")
}
} if(this.lunarMonth==12&&this.lunarDate==e(this.lunarYear,12)){
this.lunarFestival=T["0100"];
this.restDays=1
} this.showInLunar=(this.lunarFestival=="")?this.showInLunar:this.lunarFestival;
this.showInLunar=(this.showInLunar.length>4)?this.showInLunar.substr(0,2)+"...":this.showInLunar
} var Q=(function(){
var X={
} ;
X.lines=0;
X.dateArray=new Array(42);
function Y(a){
return(((a%4===0)&&(a%100!==0))||(a%400===0))
} function G(a,b){
return[31,(Y(a)?29:28),31,30,31,30,31,31,30,31,30,31][b]
} function C(a,b){
a.setDate(a.getDate()+b);
return a
} function Z(a){
var f=0;
var c=new U(new Date(a.solarYear,a.solarMonth-1,1));
var d=(c.solarWeekDay-1==-1)?6:c.solarWeekDay-1;
X.lines=Math.ceil((d+G(a.solarYear,a.solarMonth-1))/7);
for(var e=0;e<X.dateArray.length;e++){
if(c.restDays!=0){
f=c.restDays
} if(f>0){
c.isRest=true
} if(d-->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.onchange=f;
X.onchange=f
} function e(g){
d(g.solarYear,g.solarMonth);
G.innerHTML=g.ganzhiYear;
c.innerHTML=g.shengxiao;
UY.onclick=(function (){updateTime('UY')});
DY.onclick=(function (){updateTime('DY')});
UM.onclick=(function (){updateTime('UM')});
DM.onclick=(function (){updateTime('DM')});;
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+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.onclick=(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.onmouseover=(function(d){
return function(f){
this.style.border="2px solid #B12C2C";//鼠标移上显示边框
F.show({
dateIndex:d,cell:this
} )
}
} )(a);
X.onmouseout=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.onmouseover=(function (){C.style.display="block";Z.style.border="2px solid #B12C2C";});
C.onmouseout=(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>
分享到:
评论

相关推荐

    年日历实现,维护工作日和休息日,初始化法定节假日

    本文将详细探讨如何实现一个年日历,包括维护工作日和休息日,以及初始化法定节假日,主要涉及的技术栈是Vue.js,一个流行的前端JavaScript框架。 首先,我们需要理解年日历的基本构成。年日历通常会展示一年中的12...

    JS火狐兼容日历控件

    下面我们将深入探讨JS日历控件的实现、设计考虑、兼容性问题以及如何在火狐和其他浏览器中实现。 1. **JS日历控件实现**: JS日历控件通常通过HTML、CSS和JavaScript三者结合来构建。HTML用于创建基本的布局结构,...

    js带节假日日历控件

    "js带节假日日历控件"就是一种利用JavaScript实现的,包含节假日信息的日历组件。 创建这样的日历控件首先需要了解JavaScript的基本语法,包括变量声明、数据类型、条件语句、循环结构、函数等。同时,由于我们需要...

    Android代码-显示阳历,农历,节假日和二十四节气 ,可单选或者多选的日历库

    显示阳历,农历,节假日和二十四节气 实现对某月日期的单选或者多选. 使用步骤 Gradle Dependency Add the library to your project build.gradle compile 'com.joybar.calendar:librarycalendar:1.0.6' Sample ...

    带节假日日历控件

    1. **多浏览器兼容性**:如描述中提到的,该控件兼容IE(Internet Explorer)、谷歌Chrome和火狐Firefox等主流浏览器。这表明开发者已考虑到不同用户的浏览器选择,确保了应用的广泛适用性。 2. **节假日显示**:...

    Calendar 日历控件 兼容IE9

    Calendar 日历控件 兼容IE6 兼容IE8 兼容IE9 兼容火狐 兼容谷歌

    小程序日历组件,可显示农历!休假补班!自定义提醒

    本文将详细解析如何在小程序中实现一个具备农历显示、休假补班功能以及自定义提醒的日历组件。 一、日历组件基础 1. 日历组件结构:日历组件通常由一个月的日历视图构成,每个日期格子可以包含日期数字、星期以及...

    带节假日、农历的JSP/JS日历

    【标题】"带节假日、农历的JSP/JS日历" 涉及到的知识点主要集中在前端开发和服务器端编程领域,特别是日历插件的实现与个性化功能的添加。下面将对这些知识点进行详细阐述。 首先,JSP(JavaServer Pages)是一种...

    基于java开发的仿365的日历显示+源码+项目文档+运行效果(毕业设计&课程设计&项目开发)

    基于java开发的仿365的日历显示+源码+项目文档+运行效果,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档~ 基于java开发的仿365的日历显示+源码+项目...

    兼容火狐的日历控件(显示分秒)

    在"兼容火狐的日历控件(显示分秒)"这个主题中,我们关注的是一个特别针对Firefox浏览器优化,并且能够精确到分钟和秒的日历插件或组件。以下是一些相关的知识点: 1. **跨浏览器兼容性**:在Web开发中,浏览器...

    bootstrap-datetimepicker 显示农历节假日信息

    在描述中提到的“显示农历节假日信息”,意味着该插件具有集成农历日历并展示特定日期(如节假日)的功能。 在开发过程中,如果需要在网页上显示日期并考虑到中国的传统节日,这个插件就能派上用场。它允许开发者...

    支持节假日高亮显示的时间日期日历表

    标题"支持节假日高亮显示的时间日期日历表"表明我们要讨论的是一个具有特定功能的日历组件,即能够突出显示节假日,以帮助用户更直观地识别和管理时间。 首先,我们来详细了解一下“高亮显示”的概念。在用户界面上...

    页面显示完整的时间日历 农历 阳历 节假日

    在IT领域,开发一款能够显示全面时间日历的应用或网页是非常常见的需求,尤其当它能够融合农历、阳历以及各种节假日信息时,这样的工具对于用户来说极具实用性。下面将详细阐述这一主题涉及的关键知识点。 首先,...

    javascript实现日历显示

    javascript实现日历显示,可以根据用户输入时间显示日历。

    JS日历_完美兼容火狐IE等各种浏览器_calendar.js

    JS日历_完美兼容火狐IE等各种浏览器_calendar.js JS日历_完美兼容火狐IE等各种浏览器_calendar.js

    js实现在网页上展示农历日历

    在网页上展示农历日历是许多中国用户需求的功能,JavaScript(简称js)作为一种广泛用于前端开发的脚本语言,能够方便地实现这一功能。本文将详细介绍如何使用JavaScript来实现在网页上展示农历日历,以及如何参考...

    周月切换日历,支持农历,节假日显示,上下左右滑动

    本项目针对公司的特定需求,实现了一个功能丰富的日历视图,支持周月切换,农历显示,节假日标注,以及日期自定义标记。以下是这个定制日历组件的关键知识点和实现细节: 1. **周月切换**:此功能允许用户在周视图...

    javascript日历兼容火狐

    在JavaScript中,创建一个兼容不同浏览器的日历,特别是针对火狐(Firefox)这样的非主流浏览器进行优化,是一项重要的任务。本文将深入探讨如何使用JavaScript构建一个跨浏览器的日历,并重点讲解在火狐上的兼容性...

    bootstrap-datetimepicker显示农历节假日信息扩展插件

    在描述中提到的“显示农历节假日、万年历信息扩展插件”,意味着该版本的Bootstrap-Datetimepicker已经进行了功能增强,能够不仅显示公历日期,还支持显示农历日期,并且包含了节假日信息,这对于中国的用户来说尤其...

Global site tag (gtag.js) - Google Analytics