在網頁加上日期時間，給來訪者看到今天的陽曆、公曆、陰曆、農曆、年月日、時間、星期、天干地支，代碼是以 HTML+JS 編寫的，不會造成網頁的負擔，能夠快速加載顯示時間等資訊。
時間代碼分成 2 個不同版本，可以因應自己的喜好，在網站、部落格等...網頁底部加上。
如果你懂得修改代碼的，可以用作延伸為萬年曆程序，豐富頁面的資訊。
版本一：
<script type="text/javascript">
function getCalendar(){
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 str="日一二三四五六七八九十";
var now=new Date(),SY=now.getFullYear(),SM=now.getMonth(),SD=now.getDate();
var SW=now.getDay();
var lDObj=new Lunar(now);
var LM=lDObj.month;
var LD=lDObj.day;
function cyclical(num){
var Gan="甲乙丙丁戊己庚辛壬癸";
var Zhi="子丑寅卯辰巳午未申酉戌亥";
return(Gan.charAt(num%10)+Zhi.charAt(num%12));
}
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);
}
function leapDays(y){if(leapMonth(y))return (lunarInfo[y-1900]&0x10000)?30:29;else return(0);}
function leapMonth(y){return lunarInfo[y-1900]&0xf;}
function monthDays(y,m){return (lunarInfo[y-1900]&(0x10000>>m))?30:29;}
function Lunar(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{
--i;
this.isLeap=true;
--this.monCyl;
}
if(offset<0){offset+=temp;--i;--this.monCyl;}
this.month=i;
this.day=offset+1;
}
function YYMMDD(){
var cl = '<font color="#333333">';
if (SW == 0) cl = '<font color="#c00000">';
if (SW == 6) cl = '<font color="#00c000">';
return(cl+SY+'年'+(SM+1)+'月'+SD+'日</font>');
}
function weekday(){
var cl='<font color="#333333">';
if (SW==0||SW==6)cl='<font color="#ff0000">';
return cl+"星期"+str.charAt(SW)+'</font>';
}
function cDay(m,d){
var nStr="初十廿卅 ",s;
if(m>10)s='十'+str.charAt(m-10);else s=str.charAt(m);
s+='月';
switch(d){
case 10:s+='初十';break;
case 20:s+='二十';break;
case 30:s+='三十';break;
default:s+=nStr.charAt(Math.floor(d/10));s+=str.charAt(d%10);
}
if(lDObj.isLeap)s="閏"+s;
return(s);
}
function lunarTime(){
return('<font color="#006600">'+cyclical(SY-4)+'年(馬) '+cDay(LM,LD)+'</font>');
}
function specialDate(){
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 solarTerm=new Array("小寒","大寒","立春","雨水","驚蟄","春分","清明","谷雨","立夏","小滿","芒種","夏至","小暑","大暑","立秋","處暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至");
var lFtv="0101春節0115元宵節0126觀音借庫0202龍抬頭0408佛誕0505端午節0613魯班誕0707七夕0715中元節0815中秋節0909重陽節1208臘八節1224小年1229除夕";
var sFtv="0101元旦0214情人節0308婦女節0312植樹節0401愚人節0403耶穌受難*0405清明節和復活節*0422地球日0429世界願望日0501勞動節0509母親節*0512護士節0531無煙日0601兒童節0620父親節*0701香港回歸紀念0910教師節0928孔子誕辰1001國慶節1031萬聖節*1024聯合國日1102追思節1208聖母無原罪瞻禮1220澳門回歸紀念1224平安夜1225聖誕節";
var tmp1,tmp2,festival='';
tmp1=new Date((31556925974.7*(SY-1900)+sTermInfo[SM*2+1]*60000)+Date.UTC(1900,0,6,2,5));
//console.log("tmp1="+tmp1);
tmp2=tmp1.getUTCDate();
//console.log("tmp2="+tmp2);
if(tmp2==SD)festival+=' <font color="#ff6600">今日節氣：'+solarTerm[SM*2+1]+'</font>';
tmp1=new Date((31556925974.7*(SY-1900)+sTermInfo[SM*2]*60000)+Date.UTC(1900,0,6,2,5));
tmp2=tmp1.getUTCDate();
if(tmp2==SD)festival+=' <font color="#ff6600">今日節氣：'+solarTerm[SM*2]+'</font>';
//console.log("1、LM="+LM+", LD=",LD);
LD=parseInt(LD);
var reg=new RegExp((LM<10&&"0"||"")+LM+(LD<10&&"0"||"")+LD+'([^\\d]+)','');
//console.log("reg="+reg);
//console.log("LM="+LM+", LD=",LD);
if(lFtv.match(reg)!=null)festival+=' <font color="#ff0000">'+RegExp.$1+'</font>';
reg=new RegExp((SM<9&&"0"||"")+(SM+1)+(SD<10&&"0"||"")+SD+'([^\\d]+)','');
if(sFtv.match(reg)!=null)festival+=' <font color="#ff0000">'+RegExp.$1+'</font>';
//console.log(festival+"|1234");
return(festival);
}
return YYMMDD()+' '+weekday()+' '+lunarTime()+specialDate();
}
</script>
<script type="text/javascript">document.write(getCalendar())</script>版本二：
<script type="text/javascript">
var lunarInfo=new Array(/* 1900 */
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,/* 2049 */
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0,0x168a6, /* 2059*/
0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, 0x0a2e0, /* 2060 */
0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, /* 2065 */
0x05d55, 0x056a0, 0x0a6d0, 0x055d4, 0x052d0, /* 2070 */
0x0a9b8, 0x0a950, 0x0a4a0, 0x0b6a6, 0x0ad50, /* 2075 */
0x055a0, 0x0aba0, 0x0a5b0, 0x052b0, 0x0b273, /* 2080 */
0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, /* 2085 */
0x04b60, 0x0a570, 0x054e4, 0x0d260, 0x0e968, /* 2090 */
0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, /* 2095 */
0x0a9d4, 0x0a4d0, 0x0d150, 0x0f252, 0x0d520 /* 2100 */
);
var Animals=new Array("鼠","牛","虎","兔","龍","蛇","馬","羊","猴","雞","狗","豬");
var Gan=new Array("甲","乙","丙","丁","戊","己","庚","辛","壬","癸");
var Zhi=new Array("子","醜","寅","卯","辰","巳","午","未","申","酉","戌","亥");
var now = new Date();
var SY = now.getFullYear();
var SM = now.getMonth();
var SD = now.getDate();
//==== 傳入 offset 傳回幹支, 0=甲子
function cyclical(num) {
return(Gan[num%10]+Zhi[num%12])
}
//==== 傳回農歷 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年閏哪個月 1-12 , 沒閏傳回 0
function leapMonth(y) { return(lunarInfo[y-1900] & 0xf)}
//====================================== 傳回農歷 y年m月的總天數
function monthDays(y,m) { return( (lunarInfo[y-1900] & (0x10000>>m))? 30: 29 )}
//==== 算出農歷, 傳入日期物件, 傳回農歷日期物件
// 該物件屬性有 .year .month .day .isLeap .yearCyl .dayCyl .monCyl
function Lunar(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
}
function YYMMDD(){
var cl = '<font color="green" STYLE="font-size:13pt;">';
if (now.getDay() == 0) cl = '<font color="#c00000" STYLE="font-size:13pt;">';
if (now.getDay() == 6) cl = '<font color="green" STYLE="font-size:13pt;">';
return(cl+SY+'年'+(SM+1)+'月'+'</font>');
return(SY+'年'+(SM+1)+'月'+SD+'日 ');
}
function weekday(){
var day = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var cl = '<font color="green" STYLE="font-size:9pt;">';
if (now.getDay() == 0) cl = '<font color="green" STYLE="font-size:9pt;">';
if (now.getDay() == 6) cl = '<font color="red" STYLE="font-size:9pt;">';
return(cl+ day[now.getDay()]+ '</font>');
}
//==== 中文日期
function cDay(m,d){
var nStr1 = new Array('日','一','二','三','四','五','六','七','八','九','十');
var nStr2 = new Array('初','十','廿','卅',' ');
var s;
if (m>10){s = '十'+nStr1[m-10]} else {s = nStr1[m]} s += '月'
switch (d) {
case 10:s += '初十'; break;
case 20:s += '二十'; break;
case 30:s += '三十'; break;
default:s += nStr2[Math.floor(d/10)]; s += nStr1[d%10];
}
return(s);
}
// 12生肖
function solarDay1()
{
var sDObj = new Date(SY, SM, SD);
var lDObj = new Lunar(sDObj);//console.log(lDObj);
var tt = '【' + Animals[(SY-4)%12] + '】' + cyclical(lDObj.monCyl) + '月 ' + cyclical(parseInt(lDObj.dayCyl)) + '日';
return(tt+'</font>');
}
//天幹地支
function solarDay2()
{
var sDObj = new Date(SY, SM, SD);
var lDObj = new Lunar(sDObj);
var tt = cyclical(SY-1900+36)+'年 '+cDay(lDObj.month,parseInt(lDObj.day));
return(tt);
}
//節氣（ 這里面還有樣式！）
function solarDay3()
{
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 solarTerm = new Array("小寒","大寒","立春","雨水","驚蟄","春分","清明","谷雨","立夏","小滿","芒種","夏至","小暑"," 大暑","立秋","處暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至");
var lFtv = new Array("0101*春節","0128 元宵節","0505 端午節","0707 七夕情人節","0715 中元節","0815 中秋節","0909 重陽節","1208 臘八節","1224 小年","0100*除夕");
var sFtv = new Array("0101*元旦","0214 情人節","0308 婦女節","0312 植樹節","0315 消費者權益日","0401 愚人節","0501 勞動節","0504 青年節","0512 護士節","0601 兒童節","0701 建黨節 香港回歸紀念","0801 建軍節","0808 父親節","0909 毛席逝世紀念","0910 教師節","0928 孔子誕辰","1001*國慶節","1006 老人節","1024 聯合國日","1112 孫中山誕辰","1220 澳門回歸紀念","1225 聖誕節","1226 毛席誕辰");
var sDObj = new Date(SY, SM, SD);
var lDObj = new Lunar(sDObj);
var lDPOS = new Array(3);
var festival='',solarTerms='',solarFestival='',lunarFestival='',tmp1,tmp2;
//農歷節日
for (i in lFtv)
if (lFtv[i].match(/^(\d{2})(.{2})([\s\*])(.+)$/)) {
tmp1=Number(RegExp.$1)-lDObj.month;
tmp2=Number(RegExp.$2)-lDObj.day;
if(tmp1==0 && tmp2==0) lunarFestival=RegExp.$4;
}
//國歷節日
for (i in sFtv)
if (sFtv[i].match(/^(\d{2})(\d{2})([\s\*])(.+)$/)){
tmp1 = Number(RegExp.$1)-(SM+1);
tmp2 = Number(RegExp.$2)-SD;
if (tmp1==0 && tmp2==0) solarFestival = RegExp.$4;
}
//節氣
tmp1 = new Date((31556925974.7*(SY-1900)+sTermInfo[SM*2+1]*60000)+Date.UTC(1900,0,6,2,5));
tmp2 = tmp1.getUTCDate();
if (tmp2 == SD) solarTerms = solarTerm[SM*2+1];
tmp1 = new Date((31556925974.7*(SY-1900)+sTermInfo[SM*2]*60000)+Date.UTC(1900,0,6,2,5));
tmp2 = tmp1.getUTCDate();
if (tmp2 == SD) solarTerms = solarTerm[SM*2];
if (solarTerms == '' && solarFestival == '' && lunarFestival == '')
festival = '';
else
festival = '<TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR="#CCFFCC"><TR><TD align=center><marquee direction=left scrolldelay=120 behavior=alternate>'+
'<FONT COLOR="#FF33FF" STYLE="font-size:9pt;"><b>' + solarTerms + ' ' + solarFestival + ' ' + lunarFestival + '</b></FONT>'+
'</marquee></TD></TR></TABLE>';
return('<font color="green" STYLE="font-size:9pt;">'+festival+'</font>');
}
//顯示當前時間
function CurentTime()
{
var now = new Date();
var hh = now.getHours();
var mm = now.getMinutes();
var ss = now.getTime() % 60000;
ss = (ss - (ss % 1000)) / 1000;
var clock = hh+':';
if (mm < 10) clock += '0';
clock += mm+':';
if (ss < 10) clock += '0';
clock += ss;
return(clock);
}
function refreshCalendarClock() //
{
document.all.ClockTime.innerHTML = CurentTime();
}
//顯示當前時間
function GetClientLunar()
{
document.write(YYMMDD() + weekday() + solarDay2());
}
function setCalendar(){
document.write("<table border='1' cellspacing='3' width='180' bordercolor='#009B00' bgcolor='#FFFFFF' height='110' cellpadding='2'>");
document.write("<tr><td align='center'><b>"+YYMMDD()+"<br><font face='Arial' size='6' color=#FF8040>"+SD+"</font><br>");
document.write(weekday()+"<br><font id=ClockTime color=red></font>"+"<br></b>");
document.write(solarDay1()+"<br>"+solarDay2()+"<br>"+solarDay3()+"</td></tr></table>");
}
setCalendar();
setInterval('refreshCalendarClock()',1000);//1秒鐘刷新1次當前時間
</script>預覽：
