javascript实现带节日和农历的日历特效


Posted in Javascript onFebruary 01, 2015

带节日和农历的脚本:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<TITLE>带农历的日历</TITLE>          

<SCRIPT language="JavaScript"> 

<!--

 var lunarInfo=new Array(

0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,

0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,

0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,

0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,

0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,

0x06ca0,0x0b550,0x15355,0x04da0,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0,

0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,

0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,

0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,

0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,

0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,

0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,

0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,

0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,

0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0)

 

var solarMonth=new Array(31,28,31,30,31,30,31,31,30,31,30,31);

var Animals=new Array("鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪");

var solarTerm = new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至");

var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758);

var nStr1 = new Array('日','一','二','三','四','五','六','七','八','九','十');

var nStr2 = new Array('初','十','廿','卅');

//公历节日

var sFtv = new Array(

"0101 元旦",

"0214 情人节",

"0308 妇女节",

"0312 植树节",

"0315 消费者权益日",

"0401 愚人节",

"0501 劳动节",

"0504 青年节",

"0512 护士节",

"0601 儿童节",

"0701 建党节",

"0801 建军节",

"0910 教师节",

"0928 孔子诞辰",

"1001 国庆节",

"1006 老人节",

"1024 联合国日",

"1224 平安夜",

"1225 圣诞节")

//农历节日

var lFtv = new Array(

"0101 春节",

"0115 元宵节",

"0505 端午节",

"0707 七夕情人节",

"0715 中元节",

"0815 中秋节",

"0909 重阳节",

"1208 腊八节",

"1224 小年")

//返回农历y年的总天数

function lYearDays(y) {

   var i, sum = 348;

   for(i=0x8000; i>0x8; i>>=1)sum+=(lunarInfo[y-1900]&i)?1:0;

   return(sum+leapDays(y));

}

//返回农历y年闰月的天数

function leapDays(y) {

   if(leapMonth(y))  return((lunarInfo[y-1900] & 0x10000)? 30: 29);

   else return(0);

}

//判断y年的农历中那个月是闰月,不是闰月返回0

function leapMonth(y){

   return(lunarInfo[y-1900]&0xf);

}

//返回农历y年m月的总天数

function monthDays(y,m){

   return((lunarInfo[y-1900]&(0x10000>>m))?30:29);

}

//算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期

function Dianaday(objDate) {

   var i, leap=0, temp=0;

   var baseDate = new Date(1900,0,31);

   var offset   = (objDate - baseDate)/86400000;

   this.dayCyl = offset+40;

   this.monCyl = 14;

   for(i=1900; i<2050 && offset>0; i++) {

      temp = lYearDays(i)

      offset -= temp;

      this.monCyl += 12;

   }

   if(offset<0) {

      offset += temp;

      i--;

      this.monCyl -= 12;

   }

   this.year = i;

   this.yearCyl=i-1864;

   leap = leapMonth(i); //闰哪个月

   this.isLeap = false;

   for(i=1; i<13 && offset>0; i++) {

      if(leap>0 && i==(leap+1) && this.isLeap==false){    //闰月

          --i; this.isLeap = true; temp = leapDays(this.year);}

      else{

         temp = monthDays(this.year, i);}

      if(this.isLeap==true && i==(leap+1)) this.isLeap = false;    //解除闰月

      offset -= temp;

      if(this.isLeap == false) this.monCyl++;

   }

   if(offset==0 && leap>0 && i==leap+1)

      if(this.isLeap){ this.isLeap = false;}

      else{this.isLeap=true;--i;--this.monCyl;}

   if(offset<0){offset+=temp;--i;--this.monCyl;}

   this.month=i;

   this.day=offset+1;

}

//返回公历y年m+1月的天数

function solarDays(y,m){

   if(m==1)

      return(((y%4==0)&&(y%100!=0)||(y%400==0))?29:28);

   else

      return(solarMonth[m]);

}

//记录公历和农历某天的日期

function calElement(sYear,sMonth,sDay,week,lYear,lMonth,lDay,isLeap) {

      this.isToday = false;

      //公历

      this.sYear = sYear;

      this.sMonth = sMonth;

      this.sDay = sDay;

      this.week = week;

      //农历

      this.lYear = lYear;

      this.lMonth = lMonth;

      this.lDay = lDay;

      this.isLeap = isLeap;

      //节日记录

      this.lunarFestival = ''; //农历节日

      this.solarFestival = ''; //公历节日

      this.solarTerms = ''; //节气

}

//返回某年的第n个节气为几日(从0小寒起算)

function sTerm(y,n) {

   var offDate = new Date((31556925974.7*(y-1900)+sTermInfo[n]*60000)+Date.UTC(1900,0,6,2,5));

   return(offDate.getUTCDate())

}

//保存y年m+1月的相关信息

var fat=mat=9;

var eve=0;

function calendar(y,m) {

   fat=mat=0;

   var sDObj,lDObj,lY,lM,lD=1,lL,lX=0,tmp1,tmp2;

   var lDPOS = new Array(3);

   var n = 0;

   var firstLM = 0;

   sDObj = new Date(y,m,1);    //当月第一天的日期

   this.length = solarDays(y,m);    //公历当月天数

   this.firstWeek = sDObj.getDay();    //公历当月1日星期几

   if ((m+1)==5){fat=sDObj.getDay()}

   if ((m+1)==6){mat=sDObj.getDay()}

   for(var i=0;i<this.length;i++) {

      if(lD>lX) {

         sDObj = new Date(y,m,i+1);    //当月第一天的日期

         lDObj = new Dianaday(sDObj);     //农历

         lY = lDObj.year;           //农历年

         lM = lDObj.month;          //农历月

         lD = lDObj.day;            //农历日

         lL = lDObj.isLeap;         //农历是否闰月

         lX = lL? leapDays(lY): monthDays(lY,lM); //农历当月最後一天

         if (lM==12){eve=lX}

         if(n==0) firstLM = lM;

         lDPOS[n++] = i-lD+1;

      }

      this[i] = new calElement(y,m+1,i+1,nStr1[(i+this.firstWeek)%7],lY,lM,lD++,lL);

      if((i+this.firstWeek)%7==0){

         this[i].color = 'red';  //周日颜色

      }

   }

   //节气

   tmp1=sTerm(y,m*2)-1;

   tmp2=sTerm(y,m*2+1)-1;

   this[tmp1].solarTerms = solarTerm[m*2];

   this[tmp2].solarTerms = solarTerm[m*2+1];

   if((this.firstWeek+12)%7==5)    //黑色星期五

      this[12].solarFestival += '黑色星期五';

   if(y==tY && m==tM) this[tD-1].isToday = true;    //今日

}

//用中文显示农历的日期

function cDay(d){

   var s;

   switch (d) {

      case 10:

         s = '初十'; break;

      case 20:

         s = '二十'; break;

         break;

      case 30:

         s = '三十'; break;

         break;

      default :

         s = nStr2[Math.floor(d/10)];

         s += nStr1[d%10];

   }

   return(s);

}

var cld;

function drawCld(SY,SM) {

   var TF=true;

   var p1=p2="";

   var i,sD,s,size;

   cld = new calendar(SY,SM);

   GZ.innerHTML = '                       【'+Animals[(SY-4)%12]+'】';    //生肖

   for(i=0;i<42;i++) {

      sObj=eval('SD'+ i);

      lObj=eval('LD'+ i);

      sObj.className = '';

      sD = i - cld.firstWeek;

      if(sD>-1 && sD<cld.length) { //日期内

         sObj.innerHTML = sD+1;

         if(cld[sD].isToday){ sObj.style.color = '#9900FF';} //今日颜色

         else{sObj.style.color = '';}

         if(cld[sD].lDay==1){ //显示农历月

           lObj.innerHTML = '<b>'+(cld[sD].isLeap?'闰':'') + cld[sD].lMonth + '月' + (monthDays(cld[sD].lYear,cld[sD].lMonth)==29?'小':'大')+'</b>';

         }

         else{lObj.innerHTML = cDay(cld[sD].lDay);}    //显示农历日

        var Slfw=Ssfw=null;

        s=cld[sD].solarFestival;

        for (var ipp=0;ipp<lFtv.length;ipp++){    //农历节日

            if (parseInt(lFtv[ipp].substr(0,2))==(cld[sD].lMonth)){

                if (parseInt(lFtv[ipp].substr(2,4))==(cld[sD].lDay)){

                    lObj.innerHTML=lFtv[ipp].substr(5);

                    Slfw=lFtv[ipp].substr(5);

                }

            }

            if (12==(cld[sD].lMonth)){    //判断是否为除夕

                if (eve==(cld[sD].lDay)){lObj.innerHTML="除夕";Slfw="除夕";}

            }

        }

        for (var ipp=0;ipp<sFtv.length;ipp++){    //公历节日

            if (parseInt(sFtv[ipp].substr(0,2))==(SM+1)){

                if (parseInt(sFtv[ipp].substr(2,4))==(sD+1)){

                    lObj.innerHTML=sFtv[ipp].substr(5);

                    Ssfw=sFtv[ipp].substr(5);

                }

            }

        }

        if ((SM+1)==5){    //母亲节

            if (fat==0){

                if ((sD+1)==7){Ssfw="母亲节";lObj.innerHTML="母亲节"}

            }

            else if (fat<9){

                if ((sD+1)==((7-fat)+8)){Ssfw="母亲节";lObj.innerHTML="母亲节"}

            }

        }

        if ((SM+1)==6){    //父亲节

            if (mat==0){

                if ((sD+1)==14){Ssfw="父亲节";lObj.innerHTML="父亲节"}

            }

            else if (mat<9){

                if ((sD+1)==((7-mat)+15)){Ssfw="父亲节";lObj.innerHTML="父亲节"}

            }

         }

         if (s.length<=0){    //设置节气的颜色

            s=cld[sD].solarTerms;

            if(s.length>0) s = s.fontcolor('limegreen');        

         }

         if(s.length>0) {lObj.innerHTML=s;Slfw=s;}    //节气

         if ((Slfw!=null)&&(Ssfw!=null)){

            lObj.innerHTML=Slfw+"/"+Ssfw;

         }                        

      }

      else { //非日期

         sObj.innerHTML = '';

         lObj.innerHTML = '';

      }

   }

}

//在下拉列表中选择年月时,调用自定义函数drawCld(),显示公历和农历的相关信息

function changeCld() {

   var y,m;

   y=CLD.SY.selectedIndex+1900;

   m=CLD.SM.selectedIndex;

   drawCld(y,m);

}

//用自定义变量保存当前系统中的年月日

var Today = new Date();

var tY = Today.getFullYear();

var tM = Today.getMonth();

var tD = Today.getDate();

//打开页时,在下拉列表中显示当前年月,并调用自定义函数drawCld(),显示公历和农历的相关信息

function initial() {

   CLD.SY.selectedIndex=tY-1900;

   CLD.SM.selectedIndex=tM;

   drawCld(tY,tM);

}

//-->

</SCRIPT> 

<BODY onload=initial()>

<CENTER>

<FORM name=CLD>

<TABLE>

  <TR>

    <TD align=middle>

      <TABLE border=1 cellpadding="0" cellspacing="0" bordercolordark="#FFFFFF" bordercolor="#ffffff" bordercolorlight="#EEEEEE">

        <TR bgcolor="#006600">

          <TD colSpan=7><FONT color=#ffffff style="FONT-SIZE: 9pt">公历 

            <SELECT name=SY onchange=changeCld() style="FONT-SIZE: 9pt"> 

            <SCRIPT language="JavaScript">

            for(i=1900;i<2050;i++) document.write('<option>'+i);

            </SCRIPT>

            </SELECT> 年 <SELECT name=SM onchange=changeCld() style="FONT-SIZE: 9pt"> 

            <SCRIPT language="JavaScript">

            for(i=1;i<13;i++) document.write('<option>'+i);

            </SCRIPT>

            </SELECT> 月 </FONT> <FONT color=#ffffff face=宋体 id=GZ style="FONT-SIZE: 12pt"></FONT><BR></TD>

        </TR>

        <TR align=middle bgColor=#e0e0e0>

          <TD width=54 style="font-size:9pt; padding:5pt;">日</TD>

          <TD width=54 style="font-size:9pt ">一</TD>

          <TD width=54 style="font-size:9pt ">二</TD>

          <TD width=54 style="font-size:9pt ">三</TD>

          <TD width=54 style="font-size:9pt ">四</TD>

          <TD width=54 style="font-size:9pt ">五</TD>

          <TD width=54 style="font-size:9pt ">六</TD></TR>

          <SCRIPT language="JavaScript">

            var gNum;

            for(i=0;i<6;i++) {

               document.write('<tr align=center>');

               for(j=0;j<7;j++) {

                  gNum = i*7+j;

                  document.write('<td id="GD' + gNum +'"><font id="SD' + gNum +'" size=2 face="Arial Black"');

                  if(j == 0) document.write(' color=red');

                  if(j == 6) document.write(' color=#000080');

                  document.write(' TITLE=""> </font><br><font id="LD' + gNum + '" size=2 style="font-size:9pt"> </font></td>');

               }

               document.write('</tr>');

            }

           </SCRIPT>

        </TABLE>

</TD>

  </TR>

</TABLE>

</FORM>

</CENTER>

</BODY>

</HTML>

非常少见的,带节日和节气以及农历的日历特效,希望小伙伴们能够喜欢

Javascript 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
基于element-ui的rules中正则表达式
Sep 04 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 #Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 #Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 #Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 #Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 #Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 #Javascript
JavaScript插件化开发教程(六)
Feb 01 #Javascript
You might like
php遍历数组的方法分享
2012/03/22 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
详解jquery和vue对比
2019/04/16 jQuery
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
python通过函数属性实现全局变量的方法
2015/05/16 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
意大利单身交友网站:Meetic
2020/07/12 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
医院后勤自我鉴定
2013/10/13 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
经典英文广告词
2014/03/18 职场文书
保护环境建议书100字
2014/05/13 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
公积金具结保证书
2015/05/11 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL