javascript實現(xiàn)帶節(jié)日和農歷的日歷特效
更新時間：2015年02月01日 11:54:16 投稿：hebedich
這篇文章主要介紹了javascript實現(xiàn)帶節(jié)日和農歷的日歷特效,效果十分棒，需要的朋友可以參考下
帶節(jié)日和農歷的腳本：
復制代碼 代碼如下:
<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('初','十','廿','卅');
//公歷節(jié)日
var sFtv = new Array(
"0101 元旦",
"0214 情人節(jié)",
"0308 婦女節(jié)",
"0312 植樹節(jié)",
"0315 消費者權益日",
"0401 愚人節(jié)",
"0501 勞動節(jié)",
"0504 青年節(jié)",
"0512 護士節(jié)",
"0601 兒童節(jié)",
"0701 建黨節(jié)",
"0801 建軍節(jié)",
"0910 教師節(jié)",
"0928 孔子誕辰",
"1001 國慶節(jié)",
"1006 老人節(jié)",
"1024 聯(lián)合國日",
"1224 平安夜",
"1225 圣誕節(jié)")
//農歷節(jié)日
var lFtv = new Array(
"0101 春節(jié)",
"0115 元宵節(jié)",
"0505 端午節(jié)",
"0707 七夕情人節(jié)",
"0715 中元節(jié)",
"0815 中秋節(jié)",
"0909 重陽節(jié)",
"1208 臘八節(jié)",
"1224 小年")
//返回農歷y年的總天數(shù)
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年閏月的天數(shù)
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月的總天數(shù)
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月的天數(shù)
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;
//節(jié)日記錄
this.lunarFestival = ''; //農歷節(jié)日
this.solarFestival = ''; //公歷節(jié)日
this.solarTerms = ''; //節(jié)氣
}
//返回某年的第n個節(jié)氣為幾日(從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); //公歷當月天數(shù)
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'; //周日顏色
}
}
//節(jié)氣
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++){ //農歷節(jié)日
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++){ //公歷節(jié)日
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){ //母親節(jié)
if (fat==0){
if ((sD+1)==7){Ssfw="母親節(jié)";lObj.innerHTML="母親節(jié)"}
}
else if (fat<9){
if ((sD+1)==((7-fat)+8)){Ssfw="母親節(jié)";lObj.innerHTML="母親節(jié)"}
}
}
if ((SM+1)==6){ //父親節(jié)
if (mat==0){
if ((sD+1)==14){Ssfw="父親節(jié)";lObj.innerHTML="父親節(jié)"}
}
else if (mat<9){
if ((sD+1)==((7-mat)+15)){Ssfw="父親節(jié)";lObj.innerHTML="父親節(jié)"}
}
}
if (s.length<=0){ //設置節(jié)氣的顏色
s=cld[sD].solarTerms;
if(s.length>0) s = s.fontcolor('limegreen');
}
if(s.length>0) {lObj.innerHTML=s;Slfw=s;} //節(jié)氣
if ((Slfw!=null)&&(Ssfw!=null)){
lObj.innerHTML=Slfw+"/"+Ssfw;
}
}
else { //非日期
sObj.innerHTML = '';
lObj.innerHTML = '';
}
}
}
//在下拉列表中選擇年月時,調用自定義函數(shù)drawCld(),顯示公歷和農歷的相關信息
function changeCld() {
var y,m;
y=CLD.SY.selectedIndex+1900;
m=CLD.SM.selectedIndex;
drawCld(y,m);
}
//用自定義變量保存當前系統(tǒng)中的年月日
var Today = new Date();
var tY = Today.getFullYear();
var tM = Today.getMonth();
var tD = Today.getDate();
//打開頁時,在下拉列表中顯示當前年月,并調用自定義函數(shù)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>
非常少見的，帶節(jié)日和節(jié)氣以及農歷的日歷特效，希望小伙伴們能夠喜歡
相關文章
這篇文章主要介紹了Bootstrap進度條、媒體對象實例詳解,進度條包括基礎進度條，多彩進度條，條紋狀進度條等內容，具體實現(xiàn)代碼大家參考下本文2017-03-03
動態(tài)創(chuàng)建按鈕的JavaScript代碼
本文給大家分享一段JS實例代碼介紹動態(tài)創(chuàng)建按鈕的方法，需要的朋友參考下本文2016-01-01
本文給大家分享基于js實現(xiàn)的右鍵菜單功能和拖拽功能的代碼解析，非常不錯，具有一定的參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
在前端開發(fā)中,我們可能經(jīng)常需要用到枚舉,使用枚舉的好處是為了讓代碼的可讀性更強,避免直接使用數(shù)字或未知的字符串,但是在JavaScript中,要自己實現(xiàn)一個枚舉功能,那么大家能想到多少種實現(xiàn)枚舉的方法呢,我將介紹幾種實現(xiàn)枚舉的好方法2023-08-08
JavaScript之BOM?location對象+navigator對象+history?對象
這篇文章主要介紹了JavaScript?BOM中的?location對象、navigator對象、history?對象，下面圍繞他們的相關語法及各種資料展開文章詳細內容,需要的小伙伴可以參考一下，希望對大家有所幫助2021-12-12
這篇文章主要是對Javascript變量作用域進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
本篇文章分享的是 JS 當中的邏輯運算符與、或，也就是 && 、 || ，沒錯，別看這簡簡單單的幾個運算符，雖然這是最基礎的知識，但其中隱藏的奧秘卻十分耐人尋味，接下來本文就為大家一一揭開這簡單的運算符背后的奇妙之處。2016-12-12
這篇文章主要介紹了Javascript call及apply應用場景及實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
基于JavaScript實現(xiàn)動態(tài)雨滴特效
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)動態(tài)雨滴特效并且點擊雨滴會有雨滴爆裂的效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)日期格式化和倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06