Chair's blog: JS

顯示具有 JS 標籤的文章。顯示所有文章

2016年5月4日星期三

某個 div id 下的 div 加都入 class

參考來源：http://stackoverflow.com/questions/27629122/how-to-get-all-ids-inside-of-a-div-using-pure-javascript

2016年3月18日星期五

2011年8月19日星期五

JavaScript 模擬批次檔的執行

<html>   
<head>   
<title>模擬 Command Line 的執行方式 (將準備要執行的 function 放入陣列)</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
	var tempII = 0;
	var commandList = [];

function executeCommands()
	{
		document.getElementById('waitRunS').innerHTML = commandList.length;
		if(commandList.length>0)
		{
			//執行commandList中的 function 並且從陣列中移除這個Function, 以便執行下一個function...
			commandList.shift()();
		}
	}

function startNewTask()
	{
		//Create一個span
		var resultTemp = document.createElement("span");

//將span加在body內
		document.body.insertBefore(resultTemp, document.body.lastChild);

//再加上一個br
		document.body.insertBefore(document.createElement("br"),document.body.lastChild);

resultTemp.innerHTML = 0;

//tempII++;

for(tempII = 0; tempII < 50; tempII++) //產生10個 command...
		{
			//在陣列中放入function (一共放50個)
			commandList.push(
				function()
				{
					simThread(resultTemp, 1); //把執行的事件加入commandList中, 讓executeCommands可以去執行...
				}
			);
		}
	}

function simThread(temp,n)
	{
		temp.innerHTML = temp.innerHTML-(-n);
		//temp.innerHTMLt = temp.innerHTML + n; //使用這行會變成是字串合併...
	}

window.onload = function()
	{
		setInterval("executeCommands()",100); //每0.1秒就執行一次指令...
	}
 
//-->
</SCRIPT>
<h2>模擬Command Line執行</h2><button onclick="startNewTask()">每按一次產生50個累加指令</button><br>
目前待執行的指令數量<span id="waitRunS">0</span>
<hr>
<hr>
</body>
</html>

參考來源： http://itgroup.blueshop.com.tw/cwvdavid/pg?n=convew&i=246528

2011年4月1日星期五

正規法

2010年11月8日星期一

iframe 指定內容的置位

用 div 隱藏上下左右移動捲軸，
再用 JS 指定 scrollTop scrollLeft 的數值。

2010年1月25日星期一

JQuery 推出 1.4

http://code.jquery.com/jquery-1.4.js

以下是動態載入 js 範例

其他資源：jQuery的免費教學-學習 jQuery 從入門到精通只要兩小時！

2009年10月20日星期二

反編譯 eval(function(p,a,c,k,e,d)

反編譯 eval(function(p,a,c,k,e,d) 格式的 Javascript
研究 syntaxhighlighter 2.0.320 這個能讓網頁漂亮的顯示原始碼的 javascript，
結果關鍵的 shCore.js 作者給編碼了，採用的是 Dean Edwards 所提供的編碼方式，
還好拜大神後，找到了解碼方式(反編譯 eval(function(p,a,c,k,e,d) 格式的 Javascript)，
我把他稍微修改整理成下面的步驟(FF3.5)

連線到 http://dean.edwards.name/packer/
將
javascript:for%20(i=0;i<document.forms.length;++i)%20{for(j=0;j<document.forms[i].elements.length;++j){document.forms[i].elements[j].removeAttribute(%22readonly%22);document.forms[i].elements[j].removeAttribute(%22disabled%22);}}
貼到網址列並執行
將編碼的 js 複製到下方的文字方塊並執行「Decode」
複製下方解碼後的內容
連線到 http://tool.chinaz.com/Tools/JsFormat.aspx
將解碼後的程式碼貼在文字方塊
執行格式化
複製格式化結果
完成

2009年9月21日星期一

createElement...等用法

createElement、setAttribute、insertBefore、appendChild 用法

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
body innerHTML<br/>
<script type="text/javascript">
//在 body innerHTML 前插入 div
cElt=document.createElement("div");
cElt.setAttribute("id","divid");
cElt.innerHTML="I am DIV!";
var s=cElt.style;
s.backgroundColor="black";
s.color="#FFF"
s.MozOpacity=1;
s.opacity=1;
s.filter="alpha(opacity=100)";
//s.position="fixed";
s.top=0;
s.left=0;
s.width="100px";
s.height="100px";
s.zIndex=254;
s.textAlign="left";
s.margin=0;
s.padding=0;
var a=document.getElementsByTagName("body").item(0);
a.insertBefore(cElt,a.firstChild);
//在 body innerHTML 插入 p
pElt = document.createElement("p");
pElt.setAttribute("id", "pid");
pElt.innerHTML="I am P!";
s = pElt.style;
s.padding = 0;
s.margin = 0;
s.fontFamily = "Arial, sans-serif";
s.fontSize = "14px";
s.textAlign = "left";
s.color = "#F00";
a.appendChild(pElt);
</script>
</body>
</html>

appendChild、removeChild 用法

<!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>
<title>Add/Remove child: Javascript</title>
<script>
function addEvent() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById("theValue").value -1)+ 2;
  numi.value = num;
  var divIdName = 'my'+num+'Div';
  var newdiv = document.createElement('div');
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = 'Element Number ' + num + ' has been added! <a href="javascript:void(0);" onclick="removeElement(\''+divIdName+'\')">Remove the element '+divIdName+'</a>';
  ni.appendChild(newdiv);
}

function removeElement(divNum) {
  var d = document.getElementById('myDiv');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}
</script>
</head>

<body>
	<input type="hidden" value="0" id="theValue" />
	<p><a href="javascript:void(0);" onclick="addEvent();">Add Some Elements</a></p>
	<div id="myDiv"> </div>
</body>
</html>

element 用法：螞蟻的 JavaScript

判斷瀏覽器 & 版本

1.判斷 IE 版本
isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
isIE7 = /msie|MSIE 7/.test(navigator.userAgent);

2.FF or IE
var d=ifrmae.contentDocument || ifrmae.contentWindow.document;

3.FF or IE8 is true
window.XMLHttpRequest

4.IE is true
window.ActiveXObject

PS:問號表達式:運算符號(?:)
var a="我是 a ！"
// a 不是空(?) o=a ，要不(:) o="哈囉"
var o = a != null ? a : "哈囉";

2009年9月14日星期一

網頁 iframe、open 互傳值

A.html

<!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>A</title>
</head>
<body>
    <div>
        A.html
        <input type="text" id="T1" size="20" />
        <input type="button" value="送出↓" onclick="SendMsg()" />
        <input type="button" value="window.open" onclick="AB_open(document.getElementById('T1').value)" />
        <iframe src="b.html" id="iframe" width="100%" height="100%"></iframe>
    </div>
</body>
</html>

function trygive(T1Value){
x=T1Value;
try{
 p.document.getElementById('T1').value=x;
}catch(e){
 setTimeout('trygive(x)',1000);
}

}
</script>

B.html

我都忘記我是參考這 [Javascript]主網頁傳值給iframe頁面，或iframe頁面傳值給主網頁的應用，版主還有回應呢！沒想到我三個月後，改這篇文章時，才又想到...

<!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">

FF3.5、Chrome2、Safari4、IE8 加上 w3c 規則，瀏覽器本身就可以記錄錨點(書籤)

IE6、7 用 iframe 記錄

<!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">

<body>
<a href="#1" onclick="onHashchange('1')">#1</a><br/>
<a href="#2" onclick="onHashchange('2')">#2</a><br/>
<a href="#3" onclick="onHashchange('3')">#3</a><br/>
<a href="#4" onclick="onHashchange('4')">#4</a><br/>
<a href="#5">#5 正常的錨點(hash)</a><br/>
<input value="click" type="button" onclick="tt()" />
<div id="hash">hash</div>
<div id="hashHistory">hashHistory</div>
<iframe id="ieHistory"></iframe>

</body>
</html>

2009年9月3日星期四

Blogger 文章加密

官方網站

1.下載 http://www.vincentcheung.ca/jsencryption/jsencryption.js 或 直接用官網的

2.Between the ＜head＞ and ＜/head＞ tags in the html code of your webpage, add the following: 
<script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js" ></script>

<html>
<head>
<script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body onload="javascript:decryptText('v61nmxuS')">
<div id="v61nmxuS" title="U2FsdGVkX19tc8R29pQQ1YN+0Folrp89kM7gOVRLv2o=">
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

2009年8月31日星期一

標籤(DIV) 要取得屬性(name) 另外的方法

id = test_div_id
name = test_div_name

標籤(DIV) 要取得屬性(name) 另外的方法

2009年8月26日星期三

透明

Firefox3.Chrome2.Safari3
document.getElementById('opacity_test').style.opacity='0.3';

IE6
document.getElementById('opacity_test').style.filter='alpha(opacity=30)';

drag&drop 這篇也有用透明

2009年6月17日星期三

Regular Expression (RegExp)

Regular Expression (RegExp) in JavaScript

^
寫在 pattern 第一個位置時，表示其後一符號必須出現在字串開頭的位置。寫在 pattern 中間位置時則為否定之意，表示字串中不可有 ^ 之後一符號的內容。
$
寫在 pattern 最後一個位置時，表示其前一符號必須出現在字串尾端的位置。寫在 pattern 中時無特別意義。
1 *
表示字串中有 0 到無數個其前一符號的內容。
2 +
表示字串中有 1 到無數個其前一符號的內容。
3 ?
表示字串中有 0 到 1個其前一符號的內容。
4 { }
表示前一符號在字串中的重覆次數。例如 /A{2}/ 表示 'A' 重覆兩次 (即 'AA') ；/A{2,}/ 表示字串含有 2 到無數多個 'A' ；/A{2,5}/ 表示含有 2 到 5 個 'A' 。
5 .
表示一個任意字元。
6 [ ]
表示字串含有括號中任一字元的內容。可以 - 表示一組連續字元，例如 /[a-z]/, /[0-9]/ 。注意， [] 僅代表一個字元，例如 /[abc]/ 表示 'a' 或 'b' 或 'c' ，而不是 'abc' 。
7 ( )
表示一個 sub pattern ，符合 sub pattern 的字串內容會被存放在匹配陣列中，並依序指派數字代表此 sub pattern 。可以此數字在 pattern 的其他地方引用內容，例如 /The h([0-9]) means Title (\1)/ 表示第 1 個 sub pattern 是 0 到 9 的任一字元，而 \1 表示匹配的內容。故 'The h1 means Title 1', 'The h2 means Title 2' 到 'The h9 means Title 9' 符合規則。
8 \
表示轉義 (escaping) ，將其後的字元視為一般字元。例如要表示字串中含有 '/' 字元時，就必須寫作 /\// 。
9 |
「或」意，字串中含有 '|' 之前一符號或後一符號的內容。例如 /image\.(jpg|png)/ 表示 'image.jpg' 或 'image.png' 。通常會用 () 括住 '|' 的前後符號。
10 \d
表示任何一個數字，意同 [0-9] 。
11 \D
表示任何一個非數字，意同 [^0-9] 。
12 \w
表示任何一個字元與數字以及 '_' ，意同 [a-zA-Z0-9_] 。
13 \W
表示任何一個 \w 以外的字元。
14 \s
表示任何一個空白符號，包括 \t, \v 等。
15 \S
表示任何一個非空白符號。

ex：把 # 前面的字都清空
replace(/^.*#/, '')

引用：Regular Expression (RegExp) in JavaScript

2009年5月23日星期六

ERP 名詞測驗

<!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>ERP 名詞測驗</title>
</head>
<body>
<div id="view1"></div>
<script type="text/javascript">
var view1=document.getElementById('view1');
view1.innerHTML="ERP 名詞測驗<br/>";
var erp="";

var tw_names = new Array();
var en_names = new Array();

en_names[0]='Allocated';						tw_names[0]='保留量)-已限定用途之數量。';
en_names[1]='Activity Based Costing Methods ';	tw_names[1]='作業基準成本法):對不同作業提供成本分攤基準';
en_names[2]='ATP ';								tw_names[2]='可答應量):在庫量、在途量及計劃訂單量中，尚未承諾給客戶的部份ATP出現在MPS報表中的第一期及有在途訂單或計劃訂單的時段';
en_names[3]='Batch/Lot Control';				tw_names[3]='批號控制)-系統提供批次與批號控制機制。';
en_names[4]='By-Product';						tw_names[4]='副產品)-製造過程中產生的產品，投入不作規劃，通常出現在製程式產業。';
en_names[5]='Bill of Labor';					tw_names[5]='人力表)：製造某項目所需之加工、裝配、檢驗人力．';
en_names[6]='Bill of Resource';					tw_names[6]='資源表)：製造一單位特定項目或產品族所需關鍵資源的產能列表。';
en_names[7]='Budgeted capacity';				tw_names[7]='預算產能)：在特定時段，一個設定財務預算及建立費用攤提率的製造系統，預計生產的產品組合的總量。';
en_names[8]='Counting by Lot Quantity';			tw_names[8]='批號盤點)-針對某批盤點。';
en_names[9]='Counting by Serialized Items';		tw_names[9]='序號盤點)-依品項序號盤點。';
en_names[10]='Cross Docking';					tw_names[10]='暫存)-不入庫，存放在暫存區。';
en_names[11]='Cycle Counting';					tw_names[11]='週期盤點)-系統支援盤點文件及盈虧報表。';
en_names[12]='Demonstrated capacity';			tw_names[12]='驗證產能)：已證明的產能，從真實的作業資料計算而來, 並且通常以平均輸出的標準工時表示。';
en_names[13]='Expire Dating';					tw_names[13]='到期日)-特定批號之到期日，例食品。';
en_names[14]='Factory Calendar';				tw_names[14]='廠曆)-工廠開工行事曆。';
en_names[15]='Firm Planned Orders';				tw_names[15]='已確認訂單)-MRP系統不可自動重排交期之訂單。';
en_names[16]='FIFO Storage';					tw_names[16]='先進先出)-庫存上架及出貨為先進先出順序。';
en_names[17]='Item Cube';						tw_names[17]='料件材積)-界定料件之體積。';
en_names[18]='Item Description';				tw_names[18]='料件說明)-料件完整說明文字(多行式)。';
en_names[19]='Item Number';						tw_names[19]='料件號)-界定料件之編號。';
en_names[20]='Item Size';						tw_names[20]='料件尺寸)-界定料件之尺寸。';
en_names[21]='Item Types';						tw_names[21]='料件型態)-料件規劃控制的類別。';
en_names[22]='Item Weight';						tw_names[22]='料件重量)-界定料件之重量。';
en_names[23]='Lead-Time';						tw_names[23]='前置時間)-訂購至到貨所需時間。';
en_names[24]='LIFO Storage';					tw_names[24]='後進先出)-庫存上架及出貨為後進先出順序。';
en_names[25]='Lot-for-Lot';						tw_names[25]='批對批)-需求量即為訂購批量。';
en_names[26]='Lot-Size';						tw_names[26]='批量)-最小訂購數量。';
en_names[27]='Low-Level Code';					tw_names[27]='低階碼)-品項在產品結構檔中的最低階層。';
en_names[28]='Maintenance';						tw_names[28]='維修件)-為設備維修之料件。';
en_names[29]='Maximum Day Supply';				tw_names[29]='最大供應日數)-指定最大訂購期間。';
en_names[30]='Minimum Day Supply';				tw_names[30]='最小供應日數)-指定最小訂購期間。';
en_names[31]='Maximum Quantity';				tw_names[31]='最大量)-最大訂購量。';
en_names[32]='Minimum Quantity';				tw_names[32]='最小量)-最小訂購量。';
en_names[33]='Modular bills ';					tw_names[33]='模組料表)模組為接單生產時之最終組件';
en_names[34]='MRP Control Code';				tw_names[34]='MRP控制碼)-規劃時是否為MRP控制項目。';
en_names[35]='MRP Planning Policy Code';		tw_names[35]='MRP規劃政策碼)-指示MRP規劃材料補貨政策，如訂購點、批對批、訂購期間。';
en_names[36]='Multiple Quantity';				tw_names[36]='數量倍數)-最小包裝量。';
en_names[37]='Multiple UOM Conversion';			tw_names[37]='多種計量單位轉換)-收料、入庫、發料、銷售採用不同計量單位。';
en_names[38]='Net Requirements';				tw_names[38]='淨需求)-某期間應供應之數量。';
en_names[39]='Order Policy Modifier';			tw_names[39]='訂購政策調整)-指示系統如何調整補貨計畫。';
en_names[40]='Open orders file';				tw_names[40]='開立工單檔)-包含已開工但尚未完成的工單。';
en_names[41]='Packing';							tw_names[41]='包裝)-出貨裝箱程序。';
en_names[42]='PAB ';							tw_names[42]='預計可用量) 表示若採行MPS建議的行動訊息及計劃訂單，各期期未的預計庫存量。';
en_names[43]='Paperless Processing of Physical Inventory';tw_names[43]='無紙化盤點)-不使用文件進行盤點。';
en_names[44]='PD';								tw_names[44]='逾期區間)-指逾期訂購單。';
en_names[45]='Pegging';							tw_names[45]='下展)-計算BOM中下階 之毛需求。';
en_names[46]='Picking and Shipping';			tw_names[46]='揀貨與出貨)-分個別訂單與集結訂單。';
en_names[47]='Planned Order Receipts';			tw_names[47]='計劃訂購量)-經批量調整後的淨需求。';
en_names[48]='Planned Order Releases';			tw_names[48]='計劃發單量)-經前置時間調整之計劃訂購量。';
en_names[49]='Planning Horizon';				tw_names[49]='規劃期數)-須大於任何品項最大累計前置時間。';
en_names[50]='Planning bills ';					tw_names[50]='規劃料表)用來指定虛擬父件減少排程品項之數目';
en_names[51]='Phantom bills ';					tw_names[51]='幽靈料表)用來表示僅暫時存在的次組件(subassemblies) ';
en_names[52]='Procurement Code';				tw_names[52]='採購碼)-內製或外購(make/buy)。';
en_names[53]='Projected on Hand';				tw_names[53]='預計在庫量)-預計期末庫存量。';
en_names[54]='Pseudo/Phantom';					tw_names[54]='幽靈件)-不記錄庫存，僅用在工程或規劃上。';
en_names[55]='Purchase';						tw_names[55]='採購件)-向外採購之料件。';
en_names[56]='Product Load Profile';			tw_names[56]='產品負荷表)：考慮到資源需求前置時間沖銷的資源表';
en_names[57]='Random Location Control';			tw_names[57]='隨機儲位控制)-由系統隨機指定儲位。';
en_names[58]='Random Storage';					tw_names[58]='隨機存放)-庫存依可用儲位上架。';
en_names[59]='Receiving and Putaway';			tw_names[59]='收料與上架)-料件點收與儲存程序。';
en_names[60]='Receiving/ASN';					tw_names[60]='收料/出貨通知)-收料前預先通知。';
en_names[61]='Reference';						tw_names[61]='參考件)-不作庫存及發料，僅為參考文件，如圖號。';
en_names[62]='Replenishment';					tw_names[62]='補貨)-庫存補貨的技巧，如訂購點、高低法(min-max)。';
en_names[63]='Resource';						tw_names[63]='資源)-可能為人工小時、金額或任何資源因子，供RCCP使用。';
en_names[64]='Returned Material Management';	tw_names[64]='退料管理)-料件拒收退回程序。';
en_names[65]='Routing';							tw_names[65]='途程表)：製造某項目所需方法的詳細資料。';
en_names[66]='Rated capacity';					tw_names[66]='評估產能)：一個資源或系統的預期輸出能力。';
en_names[67]='Sales';							tw_names[67]='銷售件)-可銷售之品項。';
en_names[68]='Scheduled-Receipts';				tw_names[68]='在途量)-已訂購數量。';
en_names[69]='Serial Control';					tw_names[69]='序號控制)-系統提供序號控制機制，以供品質與工程變更之用。';
en_names[70]='Service Parts';					tw_names[70]='服務件)-服務或維修件(須包含在毛需求中)。';
en_names[71]='Service';							tw_names[71]='服務件)-供作服務補貨的料件。';
en_names[72]='Shrinkage';						tw_names[72]='縮率)-供應量允許之計劃損失。';
en_names[73]='Standard';						tw_names[73]='標準件)-正常規劃與發料的料件。';
en_names[74]='Stocking';						tw_names[74]='庫存件)-記錄庫存之料件。';
en_names[75]='Subcontracted';					tw_names[75]='供料外包)-內部設計，供料外包生產。';
en_names[76]='Time-Bucket';						tw_names[76]='時段)-規劃期數之單位。';
en_names[77]='Theoretical capacity';			tw_names[77]='理論產能)：一個製造系統在特定時段內的最大輸出量。';
en_names[78]='Tooling';							tw_names[78]='工具)-在製造過程中所需的工具。';
en_names[79]='Total business cycle';			tw_names[79]='營運循環:是指由界定客戶的需求到收到款所經歷的時間';
en_names[80]='Unit of Measure';					tw_names[80]='計量單位)-品項計數單位。';
en_names[81]='WIP cycle';						tw_names[81]='生產循環):由材料投產開始到訂單完成為止';
en_names[82]='Warehouse Zoning';				tw_names[82]='庫存區)-料件儲存之區域，如冷凍乾燥區。';
en_names[83]='Yield';							tw_names[83]='產出率)-理論上之淨產量，以百分比表示。';

}
   showqq+='</td><td valign="top">';
   showqq+=selRandom2(0,selNum,selNum+1,aArray2);
   showqq+='<td></tr><tr><td colspan="2"><textarea rows="12" cols="65" onclick="this.value=checkQQ(selNum)">Click here</textarea></td></tr></table><font color="#FFFFFF" size="2">'+aa+'</font>';

2009年5月19日星期二

plurk 時間軸

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<p id="alldiv" style="height: 200px;border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; background-color: #CCFFCC" onmouseup="drop()" onmousedown="grab()" />

<div style="border-style:solid; border-width:1px; left: 175px; top:80px; position:absolute;background-color: #FFFFFF;white-space:nowrap">
<span>Chair</span>
<span>說</span>
<span>原來解釋 plurk 還真不簡單...</span>
</div>

<div style="border-style:solid; border-width:1px; left: 385px;top:120px; position:absolute;background-color: #FFFFFF;white-space:nowrap">
<span>Chair</span>
<span>說</span>
<span>plurk 真不簡單...</span>
</div>

</p>

<table border="1" style="border-collapse: collapse" cellpadding="3">
<tr><td align="center">parameter</td><td align="center">value</td></tr>
<tr><td align="right">navigator.appName</td><td><span id="span_browser"></span></td></tr>
<tr><td align="right">window.event(IE)</td><td><span id="span_winevent"></span></td></tr>
<tr><td align="right">auto event(FF)</td><td><span id="span_autevent"></span></td></tr>
<tr><td align="right">algorithm</td><td><span id="span_algor"></span></td></tr>
<tr><td align="right">mousex,y</td><td><span id="span_mousex"></span>,<span id="span_mousey"></span></td></tr>
<tr><td align="right">grabx,y</td><td><span id="span_grabx"></span>,<span id="span_graby"></span></td></tr>
<tr><td align="right">elex,y</td><td><span id="span_elex"></span></td></tr>
</table>

<script language="javascript">

var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;

var elex = new Array();
var objdivleft = new Array();

document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE █有移動事件就 update
 
function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{ 
  if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }
    
  }
}

function update(e)
{
  getMouseXY(e); // NS is passing (event), while IE is passing (null)

  document.getElementById('span_browser').innerHTML = navigator.appName;
  document.getElementById('span_winevent').innerHTML = window.event ? window.event.type : '(na)';
  document.getElementById('span_autevent').innerHTML = e ? e.type : '(na)';
  document.getElementById('span_mousex').innerHTML = mousex;
  document.getElementById('span_mousey').innerHTML = mousey;
  document.getElementById('span_grabx').innerHTML = grabx;
  document.getElementById('span_graby').innerHTML = graby;
  document.getElementById('span_elex').innerHTML = elex;
  document.getElementById('span_algor').innerHTML = algor;
}

function grab()//按
{
  grabx = mousex;//點下的x坐標
  graby = mousey;//點下的y坐標

  for(i=0;i<document.getElementsByTagName("div").length;i++){//按下時的 所有的 DIV 的 left
	objdivleft[i]=document.getElementsByTagName("div")[i].style.left;
	objdivleft[i]=objdivleft[i].substring(0,objdivleft[i].indexOf("px"));
  }
  
  document.onmousemove = drag;//按住移動
  //elex = orix = parseInt(dragobj.style.left,10);
  update();
}

function drag(e) // parameter passing is important for NS family █按住移動
{
  	for(i=0;i<document.getElementsByTagName("div").length;i++){
  		elex[i] = parseInt(objdivleft[i]) + parseInt(mousex-grabx);
  		document.getElementsByTagName("div")[i].style.left=elex[i] + 'px';
  	}
	update(e);
}

function drop()//放開
{ 
  document.onmousemove = update;
}

</script>
</body>

</html>

2009年4月24日星期五

drag & drop

parameter	value
navigator.appName
window.event
auto event
algorithm
dragobj
mousex,y	,
grabx,y	,
orix,y	,
elex,y	,

Layer 1

Layer 2

2009年4月21日星期二

AJAX GET 亂碼

資料若包含中文或特殊符號，
應使用 encodeURI() 或 escape() 處理過後再傳送。

utf8.php?tt='+encodeURI('中文')

2009年4月16日星期四

控制 blog 最上面那一條

訂閱：文章 (Atom)

Chair's blog

2016年5月4日星期三

某個 div id 下的 div 加都入 class

2016年3月18日星期五

滑鼠滾輪控制左右捲軸

2011年8月19日星期五

JavaScript 模擬批次檔的執行

2011年4月1日星期五

正規法

2010年11月8日星期一

iframe 指定內容的置位

2010年1月25日星期一

JQuery 推出 1.4

2009年10月20日星期二

反編譯 eval(function(p,a,c,k,e,d)

2009年9月21日星期一

createElement...等用法

判斷瀏覽器 & 版本

2009年9月14日星期一

網頁 iframe、open 互傳值

AJAX 上一頁、下一頁記錄

2009年9月3日星期四

Blogger 文章加密

2009年8月31日星期一

標籤(DIV) 要取得屬性(name) 另外的方法

2009年8月26日星期三

透明

2009年6月17日星期三

Regular Expression (RegExp)

2009年5月23日星期六

ERP 名詞測驗

2009年5月19日星期二

plurk 時間軸

2009年4月24日星期五

drag & drop

2009年4月21日星期二

AJAX GET 亂碼

2009年4月16日星期四

控制 blog 最上面那一條

2016年5月4日 星期三

2016年3月18日 星期五

2011年8月19日 星期五

2011年4月1日 星期五

2010年11月8日 星期一

2010年1月25日 星期一

2009年10月20日 星期二

2009年9月21日 星期一

2009年9月14日 星期一

2009年9月3日 星期四

2009年8月31日 星期一

2009年8月26日 星期三

2009年6月17日 星期三

2009年5月23日 星期六

2009年5月19日 星期二

2009年4月24日 星期五

2009年4月21日 星期二

2009年4月16日 星期四

2016年5月4日星期三

2016年3月18日星期五

2011年8月19日星期五

2011年4月1日星期五

2010年11月8日星期一

2010年1月25日星期一

2009年10月20日星期二

2009年9月21日星期一

2009年9月14日星期一

2009年9月3日星期四

2009年8月31日星期一

2009年8月26日星期三

2009年6月17日星期三

2009年5月23日星期六

2009年5月19日星期二

2009年4月24日星期五

2009年4月21日星期二

2009年4月16日星期四