`

js日历

 
阅读更多

<html>

<head>

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<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 = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;【'+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>

分享到:
评论

相关推荐

    js 日历 js日历 例子 javascript日历

    JavaScript日历是一个常见的网页交互元素,它为用户提供了一个方便的方式来选择日期,常见于表单填写、事件安排等场景。在Web开发中,JavaScript日历组件的实现主要依赖于JavaScript语言和CSS来完成页面布局和样式...

    js日历 12种js日历

    在这个主题中,我们主要关注的是“js日历 12种js日历”,这显然是一份包含了多种不同实现方式的JavaScript日历组件集合。 1. **日历组件的基本概念** 日历组件是网页中常见的交互元素,它允许用户选择日期,通常...

    三款js日历(javascript 日历)

    本文将详细介绍三款JavaScript日历插件,它们各具特色,能够为你的网页增添别致的用户体验。 第一款日历插件可能是“32008731155337.rar”中的内容。虽然具体名称未知,但我们可以假设它是一款简洁且功能丰富的日历...

    js日历控件自主选择颜色

    【标题】"js日历控件自主选择颜色" 涉及的核心技术是JavaScript日历插件的开发,尤其强调用户可以根据个人喜好自定义颜色。这样的控件在网页设计中非常常见,主要用于处理与日期相关的交互,如日期选择、预约系统、...

    js日历控件大全多种样式

    JavaScript日历控件是网页开发中的重要组成部分,尤其在...这个“js日历控件大全”资源包是开发者学习和实践JavaScript日历控件的宝贵素材,通过研究和实践,你可以掌握不同日历控件的实现原理,提升网页交互设计能力。

    js日历大全(收积几种JS日历)

    JavaScript(简称JS)是一种轻量级的解释型编程语言,广泛用于网页和网络应用开发,尤其是在客户端脚本处理上。JS日历控件是前端开发中常见的一种组件,主要用于显示日期选择器,用户可以通过它方便地选取日期。本文...

    js日历记事器js动态记事日历漂亮

    总结来说,这个压缩包提供了一个完整的JavaScript日历记事器,包括了前端展示所需的HTML、CSS和JS文件,以及必要的图片资源和用户指南。通过解压并运行index.htm,用户可以在本地浏览器中查看和测试这个日历组件的...

    js日历 控件 集合

    - **FullCalendar**: 这是一个全功能的JavaScript日历组件,支持显示日程、周视图和月视图,可以与其他数据源(如Google Calendar或JSON)集成,适合构建复杂的日历应用。 - **Pickadate.js**: 这是一个轻量级且...

    史上最强js日历控件

    总的来说,"史上最强js日历控件"可能是一个集成了各种高级特性和自定义选项的JavaScript日历组件,它可以帮助开发者快速地在网页应用中实现强大的日期选择功能。通过深入研究和理解提供的压缩包内容,开发者可以有效...

    JS 日历组件(功能很强) javascript 日历控件 日历选择空间 日期选择 强烈推荐

    JavaScript日历组件是Web开发中常见的一种交互元素,主要用于用户在网页上进行日期选择操作。在前端开发领域,尤其在构建交互式用户界面时,一个功能强大的日历组件显得尤为重要。"My97DatePicker"是一个知名的...

    js日历控件优化

    这里我们将深入探讨如何优化JavaScript日历控件,特别是那些包含时分秒选择,以及支持年月日显示的组件。 1. **性能优化**:在创建日历控件时,减少DOM操作是关键。利用虚拟DOM或仅在必要时更新DOM可以显著提升性能...

    js日历计算工具

    JavaScript日历计算工具是一种在网页应用中常用的组件,主要用于处理日期和时间的计算与展示,尤其是在需要显示农历或者进行日期转换的场景下。这个工具能够帮助开发者轻松地获取每一天对应的农历日期,以及其他相关...

    js日历控件 英文版

    JavaScript日历控件是网页应用中常见的一种交互元素,它允许用户方便地选择日期,常用于事件安排、预订系统或表单输入等场景。在这个英文版的JS日历控件中,开发者为英文操作系统的用户提供了友好的界面和功能。 ...

    js日历选择控件

    My97 DatePicker 是一个非常流行的JavaScript日历插件,它功能强大,自定义选项丰富,支持多种语言,并且在各种浏览器上都有良好的兼容性。本文将详细介绍My97 DatePicker 的使用方法及其核心特性。 首先,我们来看...

    .net中js日历文件

    总结,使用JavaScript日历文件在.NET中实现日期选择功能,主要涉及前端JavaScript库的引入、HTML元素的设置、JavaScript代码的编写以及与服务器端的通信。理解这些基本概念和操作,能帮助你有效地集成和使用JS日历...

    js日历控件实例源码

    JavaScript日历控件是一种常用的前端开发工具,它允许用户在网页上方便地选择日期,常用于表单输入、事件预订、时间安排等场景。在这个"js日历控件实例源码"中,我们有两个关键文件:`demo.html`和`setday.js`。 ...

    html js脚本日历控件

    7. **兼容性**:考虑到浏览器的多样性,编写JavaScript日历控件时需要关注跨浏览器的兼容性问题,确保在不同的浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作。 在提供的文件名中,"calendar.html"...

    一个使用非常简单的js日历

    3. **JavaScript日历实现** - **HTML**:创建基本的日历结构,如表格元素(`&lt;table&gt;`)、行元素(`&lt;tr&gt;`)和单元格元素(`&lt;td&gt;`)。 - **CSS**:定义日历的样式,包括背景色、字体、边框等,使其视觉效果更佳。 -...

    好用的js日历控件 多种样式

    总的来说,JavaScript日历控件是一个涉及HTML、CSS和JavaScript综合运用的实践领域。通过选择合适的库、理解和定制样式,以及关注无障碍性,我们可以创建出既美观又实用的日历组件,提升用户的交互体验。

    简单实用js日历控件

    JavaScript日历控件是网页开发中常见的一种交互元素,它为用户提供了一个直观的方式来选择日期,常用于表单填充、事件安排或时间管理等场景。在本主题中,我们讨论的是一款简单实用的JavaScript日历控件,其特点在于...

Global site tag (gtag.js) - Google Analytics