javascript實(shí)現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效
更新時(shí)間：2015年02月01日 11:54:16 投稿：hebedich
這篇文章主要介紹了javascript實(shí)現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效,效果十分棒，需要的朋友可以參考下
帶節(jié)日和農(nóng)歷的腳本：
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>帶農(nóng)歷的日歷</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 消費(fèi)者權(quán)益日",
"0401 愚人節(jié)",
"0501 勞動(dòng)節(jié)",
"0504 青年節(jié)",
"0512 護(hù)士節(jié)",
"0601 兒童節(jié)",
"0701 建黨節(jié)",
"0801 建軍節(jié)",
"0910 教師節(jié)",
"0928 孔子誕辰",
"1001 國慶節(jié)",
"1006 老人節(jié)",
"1024 聯(lián)合國日",
"1224 平安夜",
"1225 圣誕節(jié)")
//農(nóng)歷節(jié)日
var lFtv = new Array(
"0101 春節(jié)",
"0115 元宵節(jié)",
"0505 端午節(jié)",
"0707 七夕情人節(jié)",
"0715 中元節(jié)",
"0815 中秋節(jié)",
"0909 重陽節(jié)",
"1208 臘八節(jié)",
"1224 小年")
//返回農(nóng)歷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));
}
//返回農(nóng)歷y年閏月的天數(shù)
function leapDays(y) {
if(leapMonth(y)) return((lunarInfo[y-1900] & 0x10000)? 30: 29);
else return(0);
}
//判斷y年的農(nóng)歷中那個(gè)月是閏月,不是閏月返回0
function leapMonth(y){
return(lunarInfo[y-1900]&0xf);
}
//返回農(nóng)歷y年m月的總天數(shù)
function monthDays(y,m){
return((lunarInfo[y-1900]&(0x10000>>m))?30:29);
}
//算出當(dāng)前月第一天的農(nóng)歷日期和當(dāng)前農(nóng)歷日期下一個(gè)月農(nóng)歷的第一天日期
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); //閏哪個(gè)月
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]);
}
//記錄公歷和農(nóng)歷某天的日期
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;
//農(nóng)歷
this.lYear = lYear;
this.lMonth = lMonth;
this.lDay = lDay;
this.isLeap = isLeap;
//節(jié)日記錄
this.lunarFestival = ''; //農(nóng)歷節(jié)日
this.solarFestival = ''; //公歷節(jié)日
this.solarTerms = ''; //節(jié)氣
}
//返回某年的第n個(gè)節(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月的相關(guān)信息
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); //當(dāng)月第一天的日期
this.length = solarDays(y,m); //公歷當(dāng)月天數(shù)
this.firstWeek = sDObj.getDay(); //公歷當(dāng)月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); //當(dāng)月第一天的日期
lDObj = new Dianaday(sDObj); //農(nóng)歷
lY = lDObj.year; //農(nóng)歷年
lM = lDObj.month; //農(nóng)歷月
lD = lDObj.day; //農(nóng)歷日
lL = lDObj.isLeap; //農(nóng)歷是否閏月
lX = lL? leapDays(lY): monthDays(lY,lM); //農(nóng)歷當(dāng)月最後一天
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; //今日
}
//用中文顯示農(nóng)歷的日期
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) { //日期內(nèi)
sObj.innerHTML = sD+1;
if(cld[sD].isToday){ sObj.style.color = '#9900FF';} //今日顏色
else{sObj.style.color = '';}
if(cld[sD].lDay==1){ //顯示農(nóng)歷月
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);} //顯示農(nóng)歷日
var Slfw=Ssfw=null;
s=cld[sD].solarFestival;
for (var ipp=0;ipp<lFtv.length;ipp++){ //農(nóng)歷節(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){ //設(shè)置節(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í),調(diào)用自定義函數(shù)drawCld(),顯示公歷和農(nóng)歷的相關(guān)信息
function changeCld() {
var y,m;
y=CLD.SY.selectedIndex+1900;
m=CLD.SM.selectedIndex;
drawCld(y,m);
}
//用自定義變量保存當(dāng)前系統(tǒng)中的年月日
var Today = new Date();
var tY = Today.getFullYear();
var tM = Today.getMonth();
var tD = Today.getDate();
//打開頁時(shí),在下拉列表中顯示當(dāng)前年月,并調(diào)用自定義函數(shù)drawCld(),顯示公歷和農(nóng)歷的相關(guān)信息
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é)氣以及農(nóng)歷的日歷特效，希望小伙伴們能夠喜歡
您可能感興趣的文章:
- js實(shí)現(xiàn)網(wǎng)頁自動(dòng)刷新可制作節(jié)日倒計(jì)時(shí)效果
- JavaScript評(píng)論點(diǎn)贊功能的實(shí)現(xiàn)方法
- js判斷節(jié)假日實(shí)例代碼
- 程序員的新年祝福 Happy New Year
- JS實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)贊與踩功能示例
- javascript實(shí)現(xiàn)手動(dòng)點(diǎn)贊效果
- js實(shí)現(xiàn)點(diǎn)贊按鈕功能的實(shí)例代碼
- js實(shí)現(xiàn)點(diǎn)贊效果
- js實(shí)現(xiàn)簡(jiǎn)單點(diǎn)贊操作
- JavaScript實(shí)現(xiàn)點(diǎn)贊功能的示例
相關(guān)文章
JS填寫銀行卡號(hào)每隔4位數(shù)字加一個(gè)空格
這篇文章主要介紹了JS填寫銀行卡號(hào)每隔4位數(shù)字加一個(gè)空格的相關(guān)資料,需要的朋友可以參考下2016-12-12
近幾年隨著JavaScript開發(fā)模式的逐漸成熟，CommonJS規(guī)范順勢(shì)而生，其中就包括提出了Promise規(guī)范，Promise完全改變了js異步編程的寫法，讓異步編程變得十分的易于理解2014-08-08
JavaScript數(shù)據(jù)結(jié)構(gòu)中棧的應(yīng)用之表達(dá)式求值問題詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)中棧的應(yīng)用之表達(dá)式求值問題,詳細(xì)分析了中綴表達(dá)式、后綴表達(dá)式等概念、原理與轉(zhuǎn)換方法,以及基于后綴表達(dá)式實(shí)現(xiàn)的表達(dá)式求值相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
今天小編就為大家分享一篇關(guān)于JSON.stringify()方法講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
原生js?XMLhttprequest請(qǐng)求onreadystatechange執(zhí)行兩次的解決
這篇文章主要介紹了原生js?XMLhttprequest請(qǐng)求onreadystatechange執(zhí)行兩次的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
移動(dòng)端H5喚起APP的寫法實(shí)例（IOS、android）
最近在做掃碼之后的h5頁面喚醒App的功能,所以記錄一下,這篇文章主要給大家介紹了關(guān)于移動(dòng)端H5喚起APP的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了JS驗(yàn)證郵件地址格式方法,結(jié)合兩個(gè)實(shí)例形式分析了JavaScript基于正則表達(dá)式進(jìn)行郵件格式驗(yàn)證的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
Javascript中點(diǎn)擊(click)事件的三種寫法舉例
在JavaScript中Click事件是一種常見的用戶交互事件,表示用戶在網(wǎng)頁上點(diǎn)擊某個(gè)元素的動(dòng)作,這篇文章主要給大家介紹了關(guān)于Javascript中點(diǎn)擊(click)事件的三種寫法,需要的朋友可以參考下2024-06-06
淺談Javascript如何實(shí)現(xiàn)勻速運(yùn)動(dòng)
這篇文章主要介紹了淺談Javascript如何實(shí)現(xiàn)勻速運(yùn)動(dòng)的方法及相關(guān)代碼,需要的朋友可以參考下2014-12-12
這篇文章主要給大家介紹了關(guān)于es6中reduce的基本使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用es6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09