javascript實(shí)現(xiàn)日歷效果的方法
小編給大家分享一下javascript實(shí)現(xiàn)日歷效果的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
眉縣網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),眉縣網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為眉縣上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的眉縣做網(wǎng)站的公司定做！
具體內(nèi)容如下
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>萬(wàn)年歷</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 國(guó)慶節(jié)",
"1006 老人節(jié)",
"1024 聯(lián)合國(guó)日",
"1224 平安夜",
"1225 圣誕節(jié)")
//農(nóng)歷節(jié)日
var lFtv = new Array(
"0101 春節(jié)",
"0115 元宵節(jié)",
"0505 端午節(jié)",
"0707 七夕情人節(jié)",
"0715 中元節(jié)",
"0815 中秋節(jié)",
"0909 重陽(yáng)節(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();
//打開頁(yè)時(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>看完了這篇文章，相信你對(duì)“javascript實(shí)現(xiàn)日歷效果的方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
網(wǎng)頁(yè)標(biāo)題：javascript實(shí)現(xiàn)日歷效果的方法
鏈接地址：http://jinyejixie.com/article48/pggjep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、域名注冊(cè)、動(dòng)態(tài)網(wǎng)站、面包屑導(dǎo)航、ChatGPT、建站公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- LED門戶項(xiàng)目建設(shè)解決方案 2018-01-18
- 油漆涂料行業(yè)里的網(wǎng)站建設(shè)的解決方案 2021-06-29
- 微信公眾平臺(tái)探索電子發(fā)票報(bào)銷可行性解決方案 2022-06-06
- 科技網(wǎng)站建設(shè)，科技公司網(wǎng)站建設(shè)解決方案怎么做 2023-03-05
- 網(wǎng)站建設(shè)服務(wù)器被攻擊快速解決方案 2022-12-13
- 云備份解決方案可以解決的業(yè)務(wù)問(wèn)題 2022-10-03
- 校園網(wǎng)站建設(shè)解決方案分析 2013-08-29
- 創(chuàng)新互聯(lián)教你如何策劃制定酒店網(wǎng)站解決方案 2023-03-01
- 成都網(wǎng)站建設(shè)解決方案如何做？有什么內(nèi)容？ 2016-08-22
- 成都網(wǎng)上商城開發(fā)可以選擇哪些解決方案 2023-03-01
- 這款醫(yī)院網(wǎng)站建設(shè)得十分講究，解決方案做得大贊! 2022-08-07
- 幼兒園網(wǎng)站建設(shè)解決方案 2023-03-23