茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1664703 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_60D_00107.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [分享]任意固定位置的時鐘

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[分享]任意固定位置的時鐘
冷日在研究怎麼定位Layer的時候,發現了這篇文章。
雖說原文標題是『固定再右邊的時鐘』,但是作者已經考慮過左上、右上、左下、右下各種可能。
而我們若認真看一下原始碼的話,就會發現,只要取到使用者的寬跟高,事實上要定位在哪就隨我們便啦!
所以把這程式整理一下後轉過來做個紀錄,以便未來查找。

經冷日修改整理之SourceCode如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=windows-1250">
		<meta name="generator" content="PSPad editor, www.pspad.com">
		<title>Test Clock</title>
		<style TYPE="text/css">
			<!--
					#pane {position: absolute; visibility: hidden;}
			-->
		</style>
	<script language="JavaScript">
	<!--
	/**************************************************************/
	/* 作者: Vitaliy Rabotnik */
	/* URL: http://chat.carleton.ca/~vrabotni/projects */
	/**************************************************************/
	/**************************************************************/
	/* SCRIPT SETTINGS */
	/**************************************************************/
	var TimerOrClock = "clock";
	var layerH = 50;
	var layerW = 120;
	var location = "bottom_right";
	var bgcolor = "transparent";
	var text = "文字顏色";
	var font_size = 2;
	var font_face = "細明體";
	var message = "測試用定位時鐘";
	/***************** DO NOT EDIT BELOW THIS LINE ***************/
	var layer;
	var IE = document.all;
	var updateWatch;
	var start = 0;
	function writeTime(time) {
		var color, size, face, out;
		color = (text)? text : "black";
		size = (font_size)? font_size : 2;
		face = (font_face)? font_face : "Arial";
		out = "<font face = \"" + face + "\" size = " + size + " color = \"" + color + "\">";
		out += (message)? message : "";
		if(!IE)
				out += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + time + "</font>";
		else
				out += time + "</font>";
		if(IE)
					layer.innerHTML = "<table width=\"100%\" height=\"100%\">
					<tr><td valign=\"middle\" align=\"center\">" + out + "</td></tr></table>";
		else {
			layer.document.open();
			layer.document.write("<br> &nbsp;" + "<b>" + out + "</b>");
			layer.document.close();
		}
	}
	function clock() {
		var hh, mm, ss;
		var time, d, ampm = "am";
		d = new Date();
		hh = d.getHours();
		mm = d.getMinutes();
		ss = d.getSeconds();
		if(hh > 12) {
			hh -= 12;
			ampm = "pm";
		}
		hh = (hh < 10)? "0" + hh : hh;
		mm = (mm < 10)? "0" + mm : mm;
		ss = (ss < 10)? "0" + ss : ss;
		time = hh + ":" + mm + ":" + ss + " " + ampm;
		writeTime(time);
	}
	function timer() {
		var hh, mm, ss;
		var time;
		hh = parseInt("0" + (start / 3600), 10);
		mm = parseInt("0" + ((start - (hh * 3600)) / 60), 10);
		ss = start - (hh * 3600) - (mm * 60);
		if(start < 60)
				time = ss + " seconds ";
		else if(start < 3600 && start > 60)
				 time = mm + " minutes " + ss + " seconds ";
		else {
			time = (hh == 1)? hh + " hour " : hh + " hours ";
			time += (mm == 1)? mm + " minute " : mm + " minutes ";
		}
		writeTime(time);
		start++;
	}
	function scroller() {
		var docH, docW, scrollT, scrollL;
		if(IE) {
			layer = document.all.pane;
			if(layerH) {
				layer.height = layerH;
				layer.style.height = layerH;
			}
			else
				layerH = layer.height;
			if(layerW) {
				layer.width = layerW;
				layer.style.width = layerW;
			}
			else
				layerW = layer.width;
			if(bgcolor)
		    layer.style.background = bgcolor;

			docH = document.body.clientHeight;
			docW = document.body.clientWidth;
			scrollT = document.body.scrollTop;
			scrollL = document.body.scrollLeft;

			switch(location) {
				case "top_left":
						 layer.style.posTop = scrollT;
						 layer.style.posLeft = scrollL;
						 break;
				case "top_right":
						 layer.style.posTop = scrollT;
						 layer.style.posLeft = scrollL + (docW - layerW);
						 break;
				case "bottom_left":
						 layer.style.posTop = scrollT + (docH - layerH);
						 layer.style.posLeft = scrollL;
						 break;
				case "bottom_right":
						 layer.style.posTop = scrollT + (docH - layerH);
						 layer.style.posLeft = scrollL + (docW - layerW);
						 break;
				default:
				     layer.style.posTop = scrollT;
						 layer.style.posLeft = scrollL;
			}
			layer.style.visibility = "visible";
		}
		else {
			layer = document.layers.pane;
			if(!layerH)
			  layerH = 200;
			if(!layerW)
		    layerW = 100;
			layer.resizeTo(layerW,layerH);
			if(bgcolor && bgcolor != "transparent")
			  layer.bgColor = bgcolor;

			docH = window.innerHeight;
			docW = window.innerWidth;
			scrollT = window.pageYOffset;
			scrollL = window.pageXOffset;

			switch(location.toLowerCase()) {
			case "top_left":
					 layer.moveTo(scrollL,scrollT);
					 break;
			case "top_right":
					 layer.moveTo(scrollL + (docW - layerW) - 15, scrollT);
					 break;
			case "bottom_left":
					 layer.moveTo(scrollL, scrollT + (docH - layerH) - 15);
					 break;
			case "bottom_right":
					 layer.moveTo(scrollL + (docW - layerW) - 15,scrollT + (docH - layerH) - 15);
					 break;
			default:
			     layer.moveTo(scrollL,scrollT);
			}
			//make layer visible
			layer.visibility = "show";
		}
	}
	//-->
	</script>
	</head>
	<body>
		<span id="pane">
			<layer name="pane" width=&{layerW}; height=&{layerH};>
			</layer>
		</span>
		<script>
		<!--
			setInterval("scroller();",100);
			if(TimerOrClock.toLowerCase() == "clock")
					setInterval("clock();",1000);
			else
					setInterval("timer();",1000);
		//-->
		</script>
	</body>
</html>


原文出處:【教學】固定再右邊的時鐘~ - 虛空論壇
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|