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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
JS 时间显示效果代码
Aug 23 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
js 通用订单代码
Dec 23 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
JavaScript实现拖拽盒子效果
Feb 06 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读取IMAP邮件
2006/10/09 PHP
PHP编程函数安全篇
2013/01/08 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
php 中的closure用法详解
2017/06/12 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
Python简单连接MongoDB数据库的方法
2016/03/15 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python多维数组切片方法
2018/04/13 Python
python批量赋值操作实例
2018/10/22 Python
Python 支付整合开发包的实现
2019/01/23 Python
python算法题 链表反转详解
2019/07/02 Python
Python tkinter三种布局实例详解
2020/01/06 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
教师自荐书
2013/10/08 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
平面设计求职信
2014/03/10 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
安全保证书
2015/01/16 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL