createRange

Range 屬性

屬性	說明	回傳
collapsed	如果start以及end是在同一點上回傳true，不同為false	Boolean
commonAncestorContainer	回傳涵蓋範圍，最外層標籤	String
endContainer	回傳標籤物件，使用tagName可察看標籤	Object
endOffset	回傳標籤內，最後一個字的位置	integer
startContainer	回傳標籤物件，使用tagName可察看標籤	Object
startOffset	回傳標籤內，第一個字的位置	integer

Range 方法

方法	說明	回傳
cloneContents()	複製	object
cloneRange()	複製選取範圍	Object
collapse(Boolean)	true = Range的開始位置，false = Range的結束位置	無
compareBoundaryPoints(type, rangeToCompare)	rangeToCompare=目標 Type 說明 Range.START_TO_START 開始結束在同一點上，回傳0 Range.START_TO_END 選取範圍，在目標前方，回傳-1 Range.END_TO_END 開始結束在同一點上，回傳0 Range.END_TO_START 選取範圍，在目標後方，回傳-1	Integer
compareNode(nodeToCompare)	nodeToCompare = 選擇的目標 功能和compareBoundaryPoints相同	回傳為Integer 回傳 說明 0 Range.NODE_BEFORE = 選擇在目標之後 1 Range.NODE_AFTER = 選擇在目標之前 2 Range.NODE_BEFORE_AND_AFTER = 開始跟結束在同一點上 3 Range.NODE_INSIDE = 選擇並且涵蓋到目標
comparePoint(nodeToCompare,offsetInsideNode)		回傳Integer 回傳 說明 -1 在目標之前 0 在目標裡 1 在目標之後
createContextualFragment(HTMLtext)	將字串轉標籤物件	Element
deleteContents()	刪除目標內容	無
detach()	離開選取範圍，並允許瀏覽器，以釋放資源	無
extractContents()	用途可用來移動目標內容，完整移動	element
insertNode(nodeToInsert)	nodeToInsert = 要插入的標籤物件	無
intersectsNode(nodeToCheck)	nodeToCheck = 目標	true = 選擇範圍有涵蓋到目標，包含選擇自己；false = 選擇沒有涵蓋到目標
isPointInRange(nodeToCheck,offsetInsideNode)	(nodeToCheck = 目標.focusNode;offsetInsideNode =目標.focusOffset	Boolean
selectNode(node)	目標自己本身	無
selectNodeContents(node)	目標內容	無
setEnd(node,offsetInsideNode)	node = 目標 ；offsetInsideNode = 位置int	無
setStart(node,offsetInsideNode)	node = 目標 ；offsetInsideNode = 位置int	無
setEndAfter(node)	選擇end位置之後節點	無
setEndBefore(node)	選擇end位置之前節點	無
setStartAfter(node)	選擇start位置之後節點	無
setStartBefore(node)	選擇start位置之前節點	無
surroundContents(element)	標籤物件包圍目標	無
toString()	回傳選擇字串	String

window.oper

window.oper(url,name,spec)

• url:網址
• name:選擇彈跳視窗名稱
• spec:彈跳新視窗條件

設定值	說明
fullscreen = yes|no|1|0	視窗最大化
location = yes|no|1|0	是否顯示網址
menubar = yes|no|1|0	是否顯示功能表
resizble = yes|no|1|0	是否可以調整大小
scrollbars = yes|no|1|0	是否顯示捲軸
status = yes|no|1|0	是否顯示狀態
titlebar = yes|no|1|0	是否顯示標題，問了防止(網路釣魚)，幾乎忽略使用者設定，永遠都為yes
left	視窗左邊位置
top	視窗上方位置
height	視窗高度
width	視窗寬度

String字串方法

String Object Properties

Property	Description
constructor	返回的函數創建的String對象的原型
length	回傳字串數
prototype	添加方法的屬性

String Object Methods

Method	Description
charAt()	回傳指定位置字元
charCodeAt()	指定位置字元的十六進位值，並以十進位值回傳
concat()	將兩個字串組成因字串
fromCharCode(n1, n2,nX)	Unicode碼轉成字串
indexOf(str,start)	由第一個字元，開始搜尋特定字串
lastIndexOf(str,start)	由最後個字元，開始搜尋特定字串
match(regexp)	回傳符合regexp，回傳為陣列
replace(str1,str2)	將str1字串更換str2字串
search(regexp)	回傳符合的搜尋位置，如都不符合則回傳-1
slice(begin,end)	擷取字串的特定字元，維新字串，begin(開始)，end(結束)
split(char,howmany)	將字串轉陣列，char(為分隔字元)，howmany(指定要回傳多少陣列值)
substr(start,length)	擷取字串的特定字元，維新字串，start(開始)，length(字元數，可以不填)
substring(start,end)	擷取字串的特定字元，維新字串，start(開始)，end(結束位置)
toLowerCase()	將字串轉為小寫
toUpperCase()	將字串轉為大寫
valueOf()	Returns the primitive value of a String object

String HTML Wrapper Methods

The HTML wrapper methods return the string wrapped inside the appropriate HTML tag.

Method	Description
anchor()	將字串加上錨點
big()	以較大的字級顯示字串
blink()	以閃爍方式顯示字串
bold()	以粗體顯示字串
fixed()	以單調字(固定大小)顯示文字，相當於使用<pre>標籤
fontcolor()	為字串加上顏色
fontsize()	調整字串字字體大小
italics()	以斜體顯示字串
link()	為字串加上超連結
small()	以較小字體顯示
strike()	為字串加上刪除線
sub()	以下標字顯示字串
sup()	以上標字顯示字串

Array陣列方法

Array 物件屬性

屬性	說明
constructor	返回的函數創建的Array對象的原型
length	回傳陣列數
prototype	添加方法的屬性

Array 物件方法

方法	說明	範例	回傳
concat()	將兩組陣列，結合成一組	array.concat(arrayN1,arrayN2,arrayN3)	return Array
join()	將陣列轉成字串	array.join(char)	return String
pop()	移除陣列最後一個元素,並回傳移除元素	array.pop()	return String
push()	加入新元素，至陣列最後一個,回傳陣列數	array.push(ele1,ele2,ele3,......)	return Int
reverse()	將陣列順序前後顛倒	array.reverse()	return Array
shift()	移除陣列第一個元素	array.shift()	return String
slice()	取出陣列特定元素，陣列內容會遭到改變	array.slice(start,end)	return Array
sort()	從新排列陣列元素順序	array.sort()	return Array
splice()	取出特定元素，並置換成指定元素,index(開始位置) n(刪除數量，可以等於0) ele(元素)	array.splice(index,n,ele1,ele2,eleN)	return Array
toString()	將陣列轉成字串，並以逗號分隔	array.toString()	return String
unshift()	將新元素加到陣列中，並回傳陣列總數	array.unshift(ele1,ele2,eleN)	return Int

Math

Math.abs(x)	回傳數值的絕對值
Math.acos(x)	三角函數，反餘弦值
Math.asin(x)	三角函數，反正弦值
Math.atan(x)	三角函數，反正切值
Math.atan2(x,y)	回傳由x到座標(x,y)的角度，這個角度介於-PI/2和PI/2弧度之間
Math.ceil(x)	無條件進位
Math.cos(x)	三角函數，餘弦值
Math.exp(x)	回傳e的指數
Math.floor(x)	無條件捨去
Math.log(x)	回傳已e為底的自然對數
Math.max(x,y,...)	取兩個值中較大者
Math.min(x,y,...)	取兩個值中較小者
Math.pow(x,y)	回傳x的y次方
Math.random	產生介於0與1之間的亂數
Math.round	四捨五入
Math.sin	三角函數，正弦值
Math.sqrt	平方根
Math.tan	三角函數，正切值

canvas+video

<style type="text/css">
 body{ background:#000;}
 #c{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
 }
 #v{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -180px 0 0 -240px;
 }
</style>

<canvas id="c"></canvas>
<video id="v" controls>
    <source src="/blog/video/大眼睛.mp4" type="video/mp4">
</video>

<script>
document.addEventListener('DOMContentLoaded', function(){
    var v = document.getElementById('v');
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');

    var cw = Math.floor(canvas.clientWidth / 100);
    var ch = Math.floor(canvas.clientHeight / 100);
    canvas.width = cw;
    canvas.height = ch;

    v.addEventListener('play', function(){
        draw(this,context,cw,ch);
    },false);

},false);

function draw(v,c,w,h) {
    if(v.paused || v.ended) return false;
    c.drawImage(v,0,0,w,h);
    setTimeout(draw,20,v,c,w,h);
}
</script>

<video id="v" controls>
 <source src="/blog/video/大眼睛.mp4" type="video/mp4">
</video>
<canvas id="c"></canvas>

<script>

function draw(v,c,bc,cw,ch) {
    if(v.paused || v.ended) return false;
    // First, draw it into the backing canvas
    bc.drawImage(v,0,0,cw,ch);
    // Grab the pixel data from the backing canvas
    var idata = bc.getImageData(0,0,cw,ch);
    var data = idata.data;
    var w = idata.width;
    var limit = data.length
    // Loop through the subpixels, convoluting each using an edge-detection matrix.
    for(var i = 0; i < limit; i++) {
        if( i%4 == 3 ) continue;
        data[i] = 127 + 2*data[i] - data[i + 4] - data[i + w*4];
    }
    // Draw the pixels onto the visible canvas
    c.putImageData(idata,0,0);
    // Start over!
    setTimeout(draw,20,v,c,bc,cw,ch);
}
</script>

function draw(v,c,bc,w,h) {
    if(v.paused || v.ended) return false;
    // First, draw it into the backing canvas
    bc.drawImage(v,0,0,w,h);
    // Grab the pixel data from the backing canvas
    var idata = bc.getImageData(0,0,w,h);
    var data = idata.data;
    // Loop through the pixels, turning them grayscale
    for(var i = 0; i < data.length; i+=4) {
        var r = data[i];
        var g = data[i+1];
        var b = data[i+2];
        var brightness = (3*r+4*g+b)>>>3;
        data[i] = brightness;
        data[i+1] = brightness;
        data[i+2] = brightness;
    }
    idata.data = data;
    // Draw the pixels onto the visible canvas
    c.putImageData(idata,0,0);
    // Start over!
    setTimeout(function(){ draw(v,c,bc,w,h); }, 0);
}

文字標籤

標籤	目的	範例
a	超鏈接	Visit my drinks page.
em	斜體強調	I must say I adore lemonade.
strong	重點	This tea is very hot.
small	縮小字體	These grapes are made into wine. Alcohol is addictive.
s	刪除線	text Price: ￡4.50 ￡2.00!
cite	工作職稱	works The case Hugo v. Danielle is relevant here.
q	語錄	The judge said You can drink water from the fish tank but advised against it.
dfn	定義實例	The term organic food refers to food produced without synthetic chemicals.
addr	縮略語	Organic food in Ireland is certified by the IOFGA.
time	日期和時間	Published 2009-10-21.
code	電腦代碼	The fruitdb program can be used for tracking fruit production.
var	變數	If there are n fruit in the bowl, at least n÷2 will be ripe.
samp	電腦輸出	The computer said Unknown error -3.
kbd	用戶輸入	Hit F1 to continue.
sub	下標	Water is H2O.
sup	上標	The Hydrogen in heavy water is usually 2H.
i	斜體	Lemonade consists primarily of Citrus limon.
b	關鍵詞	Take a lemon and squeeze it with a juicer.
mark	覆蓋強調	Elderflower cordial, with one part cordial to ten parts water, stands apart from the rest.
ruby,rt,rp	頂上註解	OJ (Orange Juice)
bdi	文本方向性隔離	The recommended restaurant is My Juice Cafe (At The Beach).
bdo	格式文本方向性	The proposal is to write English, but in reverse order. "Juice" would become "Juice"
span	其他	In French we call it sirop de sureau.
br	換行	Simply Orange Juice Company Apopka, FL 32703 U.S.A.
wbr	換行機會	www.simplyorangejuice.com
ins	底線	底線
del	刪除線	刪除線

列印 HTML 網頁強制換頁的方式

強制分頁有大概只有二種用的到:

{ page-break-after: always; /*在標籤後換頁*/ }
{ page-break-before: always; /*在標籤前換頁*/ }

這二個當中，大概最常用的就是 page-break-after: always，就是在指定的標籤後強制換頁，可以參考下面的 HTML 範例:

<div STYLE="page-break-after: always;">
第一頁

</div>
第二頁

再來就可以試著列印看看效果如何。

IE 7 需加入 才可換頁: (2008/2/16 更新)

範例:

第一頁

<P style='page-break-after:always'>&nbsp;</P>
第二頁

ASP.NET上傳檔案超過4MB的調整方式

"當我們要透過ASP.NET上傳到Server上

預設最大值是4MB

當超過這個大小的時候，就會出現【超出最大的要求長度 】的訊息

此時可以在Web.Config裏<system.web></system.web>之間加上以下的設定

<httpruntime maxrequestlength="8192">

數值的單位是KB，8192=1024*8代表8MB
請大家依據自己的需求調整數值。"

IE7無法使用getElementByName 替代方案

function getElementsByModifiedId(baseIdentifier) {//計算file數量
var allWantedElements = [];
var idMod = 0;
while(document.getElementById(baseIdentifier + idMod)) { // will stop when it can't find any more
allWantedElements.push(document.getElementById(baseIdentifier + idMod++));
}
return allWantedElements;
}

append and prepend 插入元素必知

function prependElement(parentID,child)//插入元素
{
var parent=document.getElementById(parentID);
parent.insertBefore(child,parent.childNodes[0]);
}