javascript實(shí)現(xiàn)日歷效果
更新時(shí)間：2019年06月17日 08:35:55 作者：MK_旁觀者
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)日歷效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>萬年歷</title>
<script type="text/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);
}
//在表格中顯示公歷和農(nóng)歷的日期,以及相關(guān)節(jié)日
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);
}
window.onload = function () {
initial();
}
</script>
<style type="text/css">
table {
font-size: 12px;
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
margin: 0 auto;
border: 1px solid #cad9ea;
color: #666;
}
td {
height: 30px;
font-family: Arial Black;
}
th {
width: 54px;
font-size: 14px;
background-color: #e0e0e0;
}
td, th {
border: 1px solid #cad9ea;
padding: 6px;
}
tr {
text-align: center;
}
.header {
background-color: #006600;
color: #fff;
font-size: 14px;
text-align: left;
}
.header #GZ {
margin-left: 120px;
}
</style>
</head>
<body>
<form name=CLD>
<table>
<tr class="header">
<td colSpan=7>
公歷
<select name=SY onchange=changeCld()>
<script type="text/javascript">
for (i = 1900; i < 2050; i++) document.write('<option>' + i);
</script>
</select>
年
<select name=SM onchange=changeCld()>
<script type="text/javascript">
for (i = 1; i < 13; i++) document.write('<option>' + i);
</script>
</select>
月 <font id=GZ></font>
</td>
</tr>
<tr>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
<script type="text/javascript">
var gNum;
for (i = 0; i < 6; i++) {
document.write('<tr>');
for (j = 0; j < 7; j++) {
gNum = i * 7 + j;
document.write('<td id="GD' + gNum + '"><font id="SD' + gNum + '" ');
if (j == 0) document.write(' color=red');
if (j == 6) document.write(' color=blue');
document.write('></font><br><font id="LD' + gNum + '" "></font></td>');
}
document.write('</tr>');
}
</script>
</table>
</form>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序點(diǎn)擊view動(dòng)態(tài)添加樣式過程解析
這篇文章主要介紹了微信小程序點(diǎn)擊view動(dòng)態(tài)添加樣式過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
JavaScript在處理動(dòng)畫方面極富靈活性,提供了一系列事件,使得開發(fā)者能夠更精準(zhǔn)地控制動(dòng)畫執(zhí)行的各個(gè)階段,使用這些事件,可以在動(dòng)畫開始、結(jié)束、重復(fù)等動(dòng)作發(fā)生時(shí)執(zhí)行特定的行為,本文將詳細(xì)介紹JavaScript中常用的動(dòng)畫事件,并展示其使用方法2023-12-12
JS實(shí)現(xiàn)商品倒計(jì)時(shí)實(shí)現(xiàn)代碼
JS實(shí)現(xiàn)商品倒計(jì)時(shí)實(shí)現(xiàn)代碼，需要的朋友可以參考一下2013-05-05
prettier自動(dòng)格式化去換行的實(shí)現(xiàn)代碼
這篇文章主要介紹了prettier自動(dòng)格式化去換行的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
Firefox outerHTML實(shí)現(xiàn)代碼
firefox沒有outerHTML用以下方法解決2009-06-06
JavaScript中創(chuàng)建原子的方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中創(chuàng)建原子的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)上傳視頻功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
解決css和js的{}與smarty定界符沖突問題的兩種方法
當(dāng)輸入url地址后網(wǎng)頁出現(xiàn)如下文所描述的問題通常是css和js的{}與smarty定界符沖突導(dǎo)致的，解決方法有兩個(gè)，具體如下，感興趣的朋友可以參考下2013-09-09
如何使用proxy實(shí)現(xiàn)一個(gè)簡(jiǎn)單完整的MVVM庫的示例代碼
這篇文章主要介紹了如何使用proxy實(shí)現(xiàn)一個(gè)簡(jiǎn)單完整的MVVM庫的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家介紹了JavaScript跳出iframe框架示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-11-11