一個相當帥的日歷時間面板 -- [時間日期]─ 深山工作室提供網絡投票系統|微信公眾號投票|微信公眾號小程序|抖音小程序|百度小程序|微信公眾號開發|企業網站建設

<thead id="jxdzp"><address id="jxdzp"><pre id="jxdzp"></pre></address></thead>

<em id="jxdzp"><span id="jxdzp"></span></em>

<listing id="jxdzp"><nobr id="jxdzp"><meter id="jxdzp"></meter></nobr></listing>

<address id="jxdzp"></address>

<noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>

<noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>

訂閱本欄目 RSS您所在的位置: 深山工作室 > 時間日期 > 正文

一個相當帥的日歷時間面板

深山行者個人網站 2009/7/23 22:12:17 深山行者字體:大中小瀏覽 7214

以下為詳細代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 一個相當帥的日歷時間面板 </title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
body {
	font-family:"宋體", sans-serif;
	font-size:12px;
	margin:0;
}
img {
	border:0px;
}

/*統一設定ul ,li樣式*/
ul , li {
	margin:0;
	padding:0;
	list-style:none;
}

li {
	line-height:21px;
}

/*單元格視圖樣式*/
#content {
	width:750px;
	margin:0 auto;
	border-left: 1px solid #CCDDEE;
}
#content .weekTitle {
	color:#53504D;
	background:#F1FFE3;
	height:20px;
	border-bottom: 1px solid #B8E78B;
}
#content .weekTitle td {
	text-align:center;
}
#content #render {
	color:#6A6A6B;
}
#content #render td {
	height:90px;
	vertical-align: top;
	border-right: 1px solid #CCDDEE;
	border-bottom: 1px solid #CCDDEE;
}
.dayStyle {
	color:#6A6A6B;
	padding-right:2px;
	padding-top:2px;
	height:15px;
	background:#E8EEF7;
	text-align:right;
	display:block;
}
.currDay {
	background:#FFFFCC;
}
.disableText {
	color:#BABDC4;
}
</style>

<script type="text/javascript">
//<![CDATA[

/**************************************************
* * 根據class屬性返回對象
* * 2008-6-22
* **************************************************
* * msn:danxinju@hotmail.com
* * author:淡新舉
***************************************************/	
var getElementsByClassName = function(className){
	var alls = document.getElementsByTagName("*");
	var rets = new Array();

for (var i=0;i<alls.length ; i++)
	{
		if (alls[i].className == className)
		{
			rets.push(alls[i]);
		}
	}

return rets;
};

var Calendar = {
	model:function(){} ,
	controller:function(){} ,
	view:function(){}
};

//視圖層
Calendar.view = function(){
	this.currDate = new Date();
	this.tds = null;
	this.days = null;

this.backNode = null;
	this.disableDays = new Array();
};

//根據年份返回每月天數
Calendar.view.getMonthDays = function(year){
	var feb = (year % 4 == 0)? 29:28; 
	return new Array(31, feb , 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
};

//初始化
Calendar.view.prototype.init = function(){
	this.setCurrMonth(new Date().getFullYear() ,new Date().getMonth());
	this.addEventForTd();
};

//為單元格注冊事件
Calendar.view.prototype.addEventForTd = function(){
	for (var i=0;i<this.tds.length ;i++ )
	{
		this.tds[i].onclick = function(){
			var arr = this.getAttribute("dateValue").split("-");
			//alert(arr)
			alert(arr[0] +"-"+ (parseInt(arr[1])+1) +"-"+ arr[2]);
		};
	}
};

//設定當前版面
Calendar.view.prototype.setCurrMonth = function(y ,m){

this.currDate.setFullYear(y);
	this.currDate.setMonth(m);
	this.currDate.setDate(1);
	
	this.loadDaysByMonth(y ,m);
};

//標示當前天
Calendar.view.prototype.markCurrDate = function(bDay ,eDay){
	var temp = new Date();
	if (this.currDate.getFullYear() == temp.getFullYear() 
						&& this.currDate.getMonth() == temp.getMonth())
	{
		for (var i=bDay;i<eDay ;i++ )
		{
			if (this.tds[i].getAttribute("dateValue").split("-")[2] == temp.getDate())
			{
				if (this.backNode)
				{
					this.backNode.className = "";
				}
				this.tds[i].className = "currDay";
				this.backNode = this.tds[i];
				return false;
			}
		}
	}
};

//復位版面狀態
Calendar.view.prototype.reInState = function(){
	this.tds[35].parentNode.style.display = "none";
	if (this.backNode)
	{
		this.backNode.className = "";
	}
	for (var i=0;i<this.disableDays.length ;i++ )
	{
		this.disableDays[i].className = "dayStyle";
	}
	this.disableDays.length = 0;
};

//根據年月加載當前視圖
Calendar.view.prototype.loadDaysByMonth = function(y ,m){
	y = parseInt(y) ,m = parseInt(m);
	this.reInState();	//復位版面狀態

//參數定位
	var beginDay = this.currDate.getDay();
	var _m = (m == 0)?11 : (m-1);
	var m_ = (m == 11)?0 : (m+1);
	var _y = (m == 0)?(y-1) : y;
	var y_ = (m == 11)?(y+1) : y;
	
	var prevMonthDays = Calendar.view.getMonthDays(_y)[_m];
	var currMonthDays = Calendar.view.getMonthDays(y)[m];
	var prevFlag = prevMonthDays - beginDay + 1 ,currFlag = 1 ,nextFlag = 1;

//加載上月信息
	for (var i=0;i<beginDay ;i++ )
	{
		this.tds[i].setAttribute("dateValue" ,_y +"-"+ _m +"-"+ prevFlag);
		this.days[i].innerHTML = prevFlag;
		this.days[i].className = "dayStyle disableText";
		this.disableDays.push(this.days[i]);
		prevFlag++;
	}
	
	//加載當月信息
	for (var i=beginDay;i<currMonthDays+beginDay ;i++ )
	{
		this.tds[i].setAttribute("dateValue" ,y +"-"+ m +"-"+ currFlag);
		this.days[i].innerHTML = currFlag;
		currFlag++;
	}
	
	//加載下月信息
	for (var i=currMonthDays+beginDay;i<this.days.length ;i++ )
	{
		this.tds[i].setAttribute("dateValue" ,y_ +"-"+ m_ +"-"+ nextFlag);
		this.days[i].innerHTML = nextFlag;
		this.days[i].className = "dayStyle disableText";
		this.disableDays.push(this.days[i]);
		nextFlag++;
	}
	
	//若當月數據顯示到第7行，那么顯示它
	if (this.tds[35].getAttribute("dateValue"))
	{
		if (this.tds[35].getAttribute("dateValue").split("-")[2] > 20)
		{
			this.tds[35].parentNode.style.display = "";
		}
	}

//標示當前天
	this.markCurrDate(beginDay ,currMonthDays+beginDay);
};

window.onload = function(){
	view = new Calendar.view();
	view.tds = document.getElementById("render").getElementsByTagName("td");
	view.days = getElementsByClassName("dayStyle");
	view.init();
	
	
	document.getElementById("testButton").onclick = function(){
		view.setCurrMonth(document.getElementById("testYear").value
							,document.getElementById("testMonth").value);
	};
};

//]]>
</script>
</head>
<body>

<div id="content">

<select id="testYear">
		<option value="2005">2005</option>
		<option value="2006">2006</option>
		<option value="2007">2007</option>
		<option value="2008" selected="selected">2008</option>
		<option value="2009">2009</option>
		<option value="2010">2010</option>
		<option value="2011">2011</option>
	</select>年
	<select id="testMonth">
		<option value="0">1</option>
		<option value="1">2</option>
		<option value="2">3</option>
		<option value="3">4</option>
		<option value="4">5</option>
		<option value="5">6</option>
		<option value="6">7</option>
		<option value="7">8</option>
		<option value="8">9</option>
		<option value="9" selected="selected">10</option>
		<option value="10">11</option>
		<option value="11">12</option>
	</select>月
	<input type="button" value="設定日期" id="testButton" />

<table width="100%" cellpadding="0" cellspacing="0" class="weekTitle">
		<tr>
			<td>日</td>
			<td>一</td>
			<td>二</td>
			<td>三</td>
			<td>四</td>
			<td>五</td>
			<td>六</td>
		</tr>
	</table>

<table width="100%" cellpadding="0" cellspacing="0" id="render">
		<tr>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
		<tr>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
		<tr>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
		<tr>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
		<tr>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
		<tr style="display:none;">
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
			<td><span class="dayStyle"></span><div id="pros"></div></td>
		</tr>
	</table>
</div>

</body>
</html>

前一頁:求實時獲取兩個input日期型值的差

后一頁:javascript時間顯示01

相關閱讀: javascript時間顯示01; 北京順義阿來電腦科技有限公司; 本站出現驗證碼問題; 使用uiautomatorviewer連接模擬器頁面報錯：Error while obtaining UI hierarchy XML file; asp利用XMLHTTP獲取xml數據方法; 微信公眾號用客服接口推送菜單消息; 網站頁面重新構寫,正在驗證其它瀏覽器; Javascript腳本常用代碼

共有0條關于《一個相當帥的日歷時間面板》的評論: 發表評論

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

返回頂部發表評論

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

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

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

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

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

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

更多>>隨機抽取信息: 深山留言板系統(網吧游戲專用) v3.6; 連云港酒店預訂網站; kiss草原旅游網站; DateDiff(計算類型,日期1,日期2)計算兩個日期之間的差; asp簡易論壇制作教程(三)——數據庫的設置; CSS選擇符詳解

更多標簽熱門標簽

心情 Google 遍歷 DOCTYPE 商城 adobe 柱狀 asasds 列表自動獲取版權預覽面板參數模板列導航 JS效果 hover 快捷鍵 FlashFxp 策劃組件 confirm 貨幣廣告排版 box 打字拼音圖片 2003 還原 Abandon 用戶體驗 font-size Request 漸變 css 狀態欄 tag word-spacing 自適應高度格式電影對話框圖層創業 Alpha 深山行者V1.2旅行社網站管理系統

行業解決方案: 抖音小程序百度小程序微信小程序

了解我們: 關于深山; 業務范圍; 案例展示中心; 聯系我們; 網站地圖; 贊助深山

動態展示: 定制網絡投票系統; 定制小程序

服務熱線: 13961347334

: 微信公眾號二維碼

: 百度小程序二維碼

: 頭條抖音小程序二維碼

: 聯系微信二維碼

: 聯系QQ二維碼

免責聲明:本站所有資料信息,有部分為本人原創,部分為從網絡收集而來,僅供網友查看閱讀所用,所有信息版權歸信息所有人或所有公司所有
如果信息內容侵犯到您的版權或權益請與我們聯系,經確認后我們會立即移除相關內容或鏈接
Copyright © 2007-2025 深山工作室 All Rights Reserved
服務QQ:565449214 手機:13961347334
ICP備案:蘇ICP備15019627號

蘇公網安備 32070502010230號

88国产精品视频一区二区三区