blog式日歷控件 -- [時間日期]─ 深山工作室提供網絡投票系統|微信公眾號投票|微信公眾號小程序|抖音小程序|百度小程序|微信公眾號開發|企業網站建設

<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您所在的位置: 深山工作室 > 時間日期 > 正文

blog式日歷控件

深山行者個人網站 2008/12/17 20:03:28 深山行者字體:大中小瀏覽 10490

以下為詳細代碼

<!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=gb2312" />
<title>blog式日歷控件</title>
</head>
<body>
<script type="text/javascript">
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}

var Calendar = Class.create();
Calendar.prototype = {
  initialize: function(container, options) {
	this.Container = $(container);//容器(table結構)
	this.Days = [];//日期對象列表
	
	this.SetOptions(options);
	
	this.Year = this.options.Year;
	this.Month = this.options.Month;
	this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null;
	this.onSelectDay = this.options.onSelectDay;
	this.onToday = this.options.onToday;
	this.onFinish = this.options.onFinish;	
	
	this.Draw();
  },
  //設置默認屬性
  SetOptions: function(options) {
	this.options = {//默認值
		Year:			new Date().getFullYear(),//顯示年
		Month:			new Date().getMonth() + 1,//顯示月
		SelectDay:		null,//選擇日期
		onSelectDay:	function(){},//在選擇日期觸發
		onToday:		function(){},//在當天日期觸發
		onFinish:		function(){}//日歷畫完后觸發
	};
	Object.extend(this.options, options || {});
  },
  //上一個月
  PreMonth: function() {
	//先取得上一個月的日期對象
	var d = new Date(this.Year, this.Month - 2, 1);
	//再設置屬性
	this.Year = d.getFullYear();
	this.Month = d.getMonth() + 1;
	//重新畫日歷
	this.Draw();
  },  
  //下一個月
  NextMonth: function() {
	var d = new Date(this.Year, this.Month, 1);
	this.Year = d.getFullYear();
	this.Month = d.getMonth() + 1;
	this.Draw();
  },
  //畫日歷
  Draw: function() {
	//用來保存日期列表
	var arr = [];
	//用當月第一天在一周中的日期值作為當月離第一天的天數
	for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push("&nbsp;"); }
	//用當月最后一天在一個月中的日期值作為當月的天數
	for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }
	
	var frag = document.createDocumentFragment();
	
	this.Days = [];
	
	while(arr.length > 0){
		//每個星期插入一個tr
		var row = document.createElement("tr");
		//每個星期有7天
		for(var i = 1; i <= 7; i++){
			var cell = document.createElement("td");
			cell.innerHTML = "&nbsp;";
			
			if(arr.length > 0){
				var d = arr.shift();
				cell.innerHTML = d;
				if(d > 0){
					this.Days[d] = cell;
					//判斷是否今日
					if(this.IsSame(new Date(this.Year, this.Month - 1, d), new Date())){ this.onToday(cell); }
					//判斷是否選擇日期
					if(this.SelectDay && this.IsSame(new Date(this.Year, this.Month - 1, d), this.SelectDay)){ this.onSelectDay(cell); }
				}
			}
			row.appendChild(cell);
		}
		frag.appendChild(row);
	}
	
	//先清空內容再插入(ie的table不能用innerHTML)
	while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); }
	this.Container.appendChild(frag);
	
	this.onFinish();
  },
  //判斷是否同一日
  IsSame: function(d1, d2) {
	return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
  } 
};

</script>
<style type="text/css">

.Calendar {
	font-family:Verdana;
	font-size:12px;
	background-color:#e0ecf9;
	text-align:center;
	width:200px;
	height:160px;
	padding:10px;
	line-height:1.5em;
}
.Calendar a{
	color:#1e5494;
}

.Calendar table{
width:100%; 
border:0;
}

.Calendar table thead{color:#acacac;}

.Calendar table td {
	font-size: 11px;
	padding:1px;
}
#idCalendarPre{
	cursor:pointer;
	float:left;
	padding-right:5px;
}
#idCalendarNext{
	cursor:pointer;
	float:right;
	padding-right:5px;
}
#idCalendar td.onToday {
	font-weight:bold;
	color:#C60;
}
#idCalendar td.onSelect {
	font-weight:bold;
}
</style>
<div class="Calendar">
  <div id="idCalendarPre">&lt;&lt;</div>
  <div id="idCalendarNext">&gt;&gt;</div>
  <span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月
  <table cellspacing="0">
    <thead>
      <tr>
        <td>日</td>
        <td>一</td>
        <td>二</td>
        <td>三</td>
        <td>四</td>
        <td>五</td>
        <td>六</td>
      </tr>
    </thead>
    <tbody id="idCalendar">
    </tbody>
  </table>
</div>
<script language="JavaScript">

var cale = new Calendar("idCalendar", {
	SelectDay: new Date().setDate(10),
	onSelectDay: function(o){ o.className = "onSelect"; },
	onToday: function(o){ o.className = "onToday"; },
	onFinish: function(){
		$("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month;
		var flag = [10,15,20];
		for(var i = 0, len = flag.length; i < len; i++){
			this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";
		}
	}
});

$("idCalendarPre").onclick = function(){ cale.PreMonth(); }
$("idCalendarNext").onclick = function(){ cale.NextMonth(); }

</script>
</body>
</html>

前一頁:帶時鐘的臺歷：一個非常非常漂亮的臺歷

后一頁:非常酷的時鐘，圖片制作精美,還有日期顯示

相關閱讀: 微信公眾號回復文本消息或用客服接口推送文本消息; 旅行社網站模板3; 一個不錯的分頁效果; CSS設計符合Web標準的網頁表單的幾個技巧; 支持IE與firefox(火狐)的css寫省略號方法; 介紹JavaScript里比較和邏輯運算符; 澳游網; 利用CSS樣式美化Button或submit按鈕

共有0條關于《blog式日歷控件》的評論: 發表評論

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

返回頂部發表評論

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

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

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

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

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

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

更多>>隨機抽取信息: access數據庫做的網站出現.ldb不能刪除超過2KB之后就會網站訪問不了數據庫，提示數據庫不存在; vue uni-app判斷空字符串/null/undefined或者有誤字段; CSS設計符合Web標準的網頁表單的幾個技巧; 一次自動化批量處理服務器上幾萬張圖片; 景點門票預訂商建站解決方案; 振輝除氧器

更多標簽熱門標簽

拖動標語破解 strong 尺寸 dd 打字豎排 form float dt 定律 javascript button 火狐留言次數 ul 彈出判斷漸隱 JavaScript實現文本框提示效果陰影效果操作網頁制作 tab 市圖片數據客戶端變幻 2003 虛擬透明 Excel 多選框目標 alert DIV+CSS做的透明菜單兼容IE、FF等半透明事務 slectindext mssql shift 分頁顏色 rad 斷線 select CAD 選擇符

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

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

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

服務熱線: 13961347334

: 微信公眾號二維碼

: 百度小程序二維碼

: 頭條抖音小程序二維碼

: 聯系微信二維碼

: 聯系QQ二維碼

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

蘇公網安備 32070502010230號

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