天天综合一区,国产一区二区三区在线,日韩一页

黑色的非常酷的簡單JavaScript日歷及說明

深山行者個人網站 2010/7/4 16:53:06 深山行者字體:大中小瀏覽 13772

以下為詳細代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>calendar2</title>
<style type="text/css">
#calendar{
	background:#000;
	color:#FFF;
	font-size:0.8em;
}
#tittle{
	font-size:1.4em;
	padding:4px 0.55em;
}
#days th {
	font-weight:bold;
	text-align:center;
	padding:4px 0.55em;
}
#calendar td{
	text-align:center;
	padding:4px 0.55em;
}
#today{
	color:#F00;
	font-weight:bold;
}
</style>
<script type="text/javascript">
var calendar = {
	dayTable:null,				//初始化TABLE
	year:null,					//初始化年
	month:null,					//初始化月份
	
	getFirstDay:function(year,month){					//獲取每個月第一天再星期幾
		var firstDay = new Date(year,month,1);
		return firstDay.getDay();						//getDay()方法來獲取
	},
	getMonthLen:function(year,month){					//獲取當月總共有多少天
		var nextMonth = new Date(year,month+1,1);		//獲取下個月的第一天	
		nextMonth.setHours(nextMonth.getHours() - 3);	//由于獲取的天是0時,所以減去3小時則可以得出該月的天數
		return nextMonth.getDate();						//返回當天日期
	},
	createCalendar:function(form,date){					//創建日歷方法
		calendar.year = date.getFullYear();				//獲得當時的年份,并賦值到calendar屬性year中,以便別的方法的調用
		calendar.month = date.getMonth();				//跟上面獲取年份的目的一樣
		form.getElementsByTagName('th')[1].innerHTML = calendar.year + '年 ' + (calendar.month + 1) + '月';		//插入年份和月份
		calendar.clearCalendar(form);					//清空TABLE
		var monthLen = calendar.getMonthLen(calendar.year,calendar.month);		//獲取月份長度
		var firstDay = calendar.getFirstDay(calendar.year,calendar.month);		//獲取月份首天為星期幾
		for(var i = 1;i <= monthLen;i++){										//循環寫入每天的值進入TABLE中
			calendar.dayTable[i+firstDay-1].innerHTML = i;						//i為循環值,加上第一天的星期值剛可以對應TABLE位置,但由于數組從0開始算,所以需要減去1
			if((i+firstDay-2) == new Date().getDate() && calendar.month == new Date().getMonth() && calendar.year == new Date().getFullYear()){	//判斷是否是當天
				calendar.dayTable[i+firstDay-1].id = 'today';
			}
		}
	},
	clearCalendar:function(form){						//清空TABLE方法
		this.dayTable = form.getElementsByTagName('td');
		for(var i = 0;i < this.dayTable.length;i++){
			this.dayTable[i].innerHTML = '&nbsp;';
			this.dayTable[i].id = '';
		}
	},
	init:function(form){								//主方法
		this.dayTable = form.getElementsByTagName('td');
		this.createCalendar(form,new Date());
		var preMon = form.getElementsByTagName('th')[0];
		var nextMon = form.getElementsByTagName('th')[2];
		preMon.onclick = function(){					//當點擊左按鈕時,減去一個月,并重繪TABLE
			calendar.createCalendar(form,new Date(calendar.year,calendar.month-1,1));
		}
		nextMon.onclick = function(){					//當點擊右按鈕時,加上一個月,并重繪TABLE
			calendar.createCalendar(form,new Date(calendar.year,calendar.month+1,1));
		}
	}
	
}
window.onload = function(){
	var calendars = document.getElementById('calendar');
	
	calendar.init(calendars);
}
</script>
</head>
<body>
<table id="calendar" cellspacing="0">
	<tr>
    	<th style="cursor:pointer;cursor:hand;"><<</th>
		<th id="tittle" colspan="5">&nbsp;</th>
        <th style="cursor:pointer;cursor:hand;">>></th>
	</tr>
	<tr id="days">
		<th>日</th>
		<th>一</th>
		<th>二</th>
		<th>三</th>
		<th>四</th>
		<th>五</th>
		<th>六</th>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
</body>
</html>

前一頁:非常酷的javascript實現萬年歷功能

后一頁:特別簡潔的簡單JavaScript日歷及說明

相關閱讀: 深山旅行社管理系統二次開發是怎么收費？; uni-app自定義組件調用; 如何加快網站訪問速度; loading圖片; flash利用as調用執行外部設置的exe文件; 測試電腦硬件信息軟件; 深山旅行社網站管理系統 v1.6; uniapp的rich-text組件注入的a標簽點擊跳轉處理

共有0條關于《黑色的非常酷的簡單JavaScript日歷及說明》的評論: 發表評論

正在加載評論......

返回頂部發表評論

呢稱:
表情:
內容:	評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼:

網友評論聲明,請自覺遵守互聯網相關政策法規。

您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。

更多信息>>欄目類別選擇: 百度小程序開發; 微信小程序開發; 微信公眾號開發; uni-app; asp函數庫; ASP; DIV+CSS; HTML; python

更多>>同類信息: 利用JavaScript獲取現在時間日期與農歷; 另外的一種可以計算的倒計時效果; 非常酷的javascript實現萬年歷功能; 黑色的非常酷的簡單JavaScript日歷及說明; 特別簡潔的簡單JavaScript日歷及說明; 可以用于考試系統中試卷上交的javascript倒計時

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動端自動化測試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車帝小程序; javascript獲取瀏覽器指紋可以用來做投票; 火狐Mozilla Firefox出現：無法載入您的Firefox配置文件它可能已經丟失或是無法訪問問題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過代碼修改pip下載源讓下載庫飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機抽取信息: 拖動效果封裝已經修改，適應火狐; 會員系統; 鹽城市開心假日旅行社有限公司; 連云港天天美食網; IE8 CSS HACK 兼容; iframe里阻止_blank彈出新窗口的方法

更多標簽熱門標簽

拖動滑動 ie5.5 焦點小旋風灰色提示 rad 層系統滑過 split getElementById 深山行者類別還原 access position 斷線淘寶個性定位文章底部 sql asasds 青春珍惜 option DW cpu iis 閉合省略 javascri CSS濾鏡文字垂直居中經典思考 DIV CSS做的透明菜單兼容IE、FF等配色加減相冊 visite 風格選擇框 filter IE8 XMLHTTP 背景色

能看的av_午夜黄色av_在线观看国产视频_天天爱综合_国产精品亚洲成在人线_日韩一

黑色的非常酷的簡單JavaScript日歷及說明