✍ 📁 🙈 🙉 🙊

2018年7月28日星期六

auto-resize a img fit into div

2018年7月27日星期五

div background

DIV 內置入 jpg 圖片

底圖就會依照 DIV 區塊的大小，等比縮放到區塊中。
用 CCS background-image: center，background-repeat: no-repeat 完成。

<style type="text/css">
.a17524{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMa3fbcschI2vxmf4RGwxdn3jfM2N56-Ik46Oh3xFBQ-S0JHRjJvojLfpjKu2dVCmpHmg2Hjk2KEK-4-iQReohtaHv3sL_O2YMX1sGQdEvFlXU4I3RicLmJJ1Ub2Pi1pZ3jY2U3HpCMql/s1024/ck20180728.jpg");
-moz-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-o-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-webkit-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
background-position: center; /*置中*/
background-repeat: no-repeat; /*背景圖案不重複*/
border:2px solid #000000; /*邊框樣式與顏色*/
background-color:#CCCCCC; /*背景的顏色*/
color: fuchsia ;
font-size: 20px ;
}
</style>

範例的效果 :

2018年7月25日星期三

toggle() 切換顯示或是隱藏

toggle() 是jQuery中基本的動畫函數，使用自定義效果來顯示或隱藏匹配的元素。
$("#id").toggle( effect , options , duration , complete )，
如下 : $("#myimg").toggle(effectType, 1000,function() { } ); ;
effect String 一个字符串，指示要使用哪一种特效。
options Object 特效具体的设置和 easing 。
duration Number 或 String 一个字符串或一个数字，指定动画将运行多久。
complete Function() 一旦动画完成时要调用的函数。

<center><div id="buttom_id"><input type="button" class="Bittom"value="blind" /><input type="button" class="Bittom" value="bounce" /><input type="button" class="Bittom" value="clip" /><input type="button" class="Bittom" value="drop" /><input type="button" class="Bittom" value="explode" /><input type="button" class="Bittom" value="fold" /><br /><input type="button" class="Bittom" value="highlight" /><input type="button" class="Bittom" value="puff" /><input type="button" class="Bittom" value="pulsate" /><input type="button" class="Bittom" value="scale" /><input type="button" class="Bittom" value="shake" /><input type="button" class="Bittom" value="size"><input type="button" class="Bittom" value="slide" /><br /><img  id="myimg" width="40%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMa3fbcschI2vxmf4RGwxdn3jfM2N56-Ik46Oh3xFBQ-S0JHRjJvojLfpjKu2dVCmpHmg2Hjk2KEK-4-iQReohtaHv3sL_O2YMX1sGQdEvFlXU4I3RicLmJJ1Ub2Pi1pZ3jY2U3HpCMql/s1024/ck20180728.jpg" /></center></div> <script src="https://code.jquery.com/jquery-1.10.2.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript">     $("#buttom_id input").click (function () {          var effectType = $(this).val();            $("#buttom_id").toggle(effectType, 500);      window.setTimeout( function() { $("#buttom_id").toggle(effectType, 500);  }, 1000 );    });   </script>

toggle() 切換顯示或是隱藏

$("#buttom_id").toggle(effectType, 500);

window.setTimeout( function() {
$("#buttom_id").toggle(effectType, 500);  }, 1000 );

});  
</script>

2018年4月10日星期二

CSS Filters濾鏡效果

CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。

blur模糊	0px 到100px，的百分比控制
sepia懷舊	0 or 1，1為元素轉換成黑白影像
invert負片	0 or 1，1為元素轉換成負片影像
opacity透明	0 to 1，step 0.1 0為元素轉換成全透明影像
contrast對比	0 to 10， 10為明亮和陰暗部份的大差距
saturate飽和	0 to 10， 10為元素轉換成最大飽和度
brightness亮度	0 to 10， 10為元素轉換成最大亮度度
grayscale灰階	0 to 10， 10為元素轉換成最大灰階度
hue-rotate色相旋轉	0deg – 360deg 旋轉色相環
drop-shadow下拉陰影	陰影效果

<input  onchange="Frange(this.value)" type="range" id="points" min="0.1" max="10">
</td></tr>
</tbody></table>
</div>
<div id="DP1">
</div>
<div id="DP2">
</div>
<script src="http://code.jquery.com/jquery-1.6.4.js" type="text/javascript"></script>   
<script >
$('#points').attr('disabled', 'disabled');

function Fblur(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte","blur("+pp+"px)");      
cc2 = $('#imgFiltro').css("-webkit-filter","blur("+pp+"px)"); 
cc3 = $('#imgFiltro').css("-o-filter","blur("+pp+"px)");
cc4 = $('#imgFiltro').css("-ms-filter","blur("+pp+"px)");
cc5 = $('#imgFiltro').css("filter","blur("+pp+"px)");
document.getElementById('DP1').innerHTML ="blur" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=100;
document.getElementById('points').min=0;
document.getElementById('points').step=0.1;
f16311("blur");
}

function Fbrightness(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte","brightness("+pp+")");      
cc2 = $('#imgFiltro').css("-webkit-filter","brightness("+pp+")"); 
cc3 = $('#imgFiltro').css("-o-filter","brightness("+pp+")");
cc4 = $('#imgFiltro').css("-ms-filter","brightness("+pp+")");
cc5 = $('#imgFiltro').css("filter","brightness("+pp+")");
document.getElementById('DP1').innerHTML ="brightness" ;
$('#points').removeAttr('disabled'); 
document.getElementById('points').max=10;
f16311("brightness");
}

function Fcontrast(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte","contrast("+pp+")");      
cc2 = $('#imgFiltro').css("-webkit-filter","contrast("+pp+")"); 
cc3 = $('#imgFiltro').css("-o-filter","contrast("+pp+")");
cc4 = $('#imgFiltro').css("-ms-filter","contrast("+pp+")");
cc5 = $('#imgFiltro').css("filter","contrast("+pp+")");
document.getElementById('DP1').innerHTML ="contrast" ;
$('#points').removeAttr('disabled'); 
document.getElementById('points').max=10;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;f16311("contrast");
}

function Fdropshadow(){   
pp = $(points).val(); 
cc1 = $('#imgFiltro').css("-moz-filte",    "drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");      
cc2 = $('#imgFiltro').css("-webkit-filter","drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");
cc4 = $('#imgFiltro').css("-ms-filter","drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");
cc5 = $('#imgFiltro').css("filter","drop-shadow(rgba(0, 0, 0, 0.7) 10px 10px 7px)");
document.getElementById('DP1').innerHTML ="drop-shadow" ;
$('#points').attr('disabled', 'disabled');
f16311("dropshadow");
}

function Fgrayscale(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "grayscale(" +pp+"%)");      
cc2 = $('#imgFiltro').css("-webkit-filter","grayscale(" +pp+"%)");        
cc3 = $('#imgFiltro').css("-o-filter",     "grayscale(" +pp+"%)");       
cc4 = $('#imgFiltro').css("-ms-filter",    "grayscale(" +pp+"%)");          
cc5 = $('#imgFiltro').css("filter",        "grayscale(" +pp+"%)");      
document.getElementById('DP1').innerHTML ="grayscale" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=200;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;
f16311("grayscale");
}

function Fsepia(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "sepia(1)");      
cc2 = $('#imgFiltro').css("-webkit-filter","sepia(1)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "sepia(1)");
cc4 = $('#imgFiltro').css("-ms-filter",    "sepia(1)");
cc5 = $('#imgFiltro').css("filter",        "sepia(1)");
document.getElementById('DP1').innerHTML ="sepia" ;
$('#points').attr('disabled', 'disabled');
f16311("Fsepia");
}

function Fhuerotate(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "hue-rotate("+pp+"deg)");      
cc2 = $('#imgFiltro').css("-webkit-filter","hue-rotate("+pp+"deg)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "hue-rotate("+pp+"deg)");
cc4 = $('#imgFiltro').css("-ms-filter",    "hue-rotate("+pp+"deg)");
cc5 = $('#imgFiltro').css("filter",        "hue-rotate("+pp+"deg)");
document.getElementById('DP1').innerHTML ="hue-rotate" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=360;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;
f16311("Fsepia");
}

function Finvert(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",    "invert(1)");      
cc2 = $('#imgFiltro').css("-webkit-filter","invert(1)"); 
cc3 = $('#imgFiltro').css("-o-filter",     "invert(1)");
cc4 = $('#imgFiltro').css("-ms-filter",    "invert(1)");
cc5 = $('#imgFiltro').css("filter",        "invert(1)");
document.getElementById('DP1').innerHTML ="invert" ;
$('#points').attr('disabled', 'disabled');
f16311("invert");
}

function Fopacity(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",     "opacity("+ pp + ")");      
cc2 = $('#imgFiltro').css("-webkit-filter", "opacity("+ pp + ")"); 
cc3 = $('#imgFiltro').css("-o-filter",      "opacity("+ pp + ")");
cc4 = $('#imgFiltro').css("-ms-filter",     "opacity("+ pp + ")");
cc5 = $('#imgFiltro').css("filter",         "opacity("+ pp + ")");
document.getElementById('DP1').innerHTML ="opacity" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=1;
document.getElementById('points').min=0;
document.getElementById('points').step=0.1;
f16311("opacity");
}

function Fsaturate(){   
pp = $(points).val();     
cc1 = $('#imgFiltro').css("-moz-filte",     "saturate("+ pp + ")");      
cc2 = $('#imgFiltro').css("-webkit-filter", "saturate("+ pp + ")"); 
cc3 = $('#imgFiltro').css("-o-filter",      "saturate("+ pp + ")");
cc4 = $('#imgFiltro').css("-ms-filter",     "saturate("+ pp + ")");
cc5 = $('#imgFiltro').css("filter",         "saturate("+ pp + ")");
document.getElementById('DP1').innerHTML ="saturate" ;
$('#points').removeAttr('disabled');
document.getElementById('points').max=10;
document.getElementById('points').min=1;
document.getElementById('points').step=0.1;
f16311("saturate");
}

function Fnone(){   
$('#imgFiltro').removeAttr("style")
document.getElementById('DP1').innerHTML ="none" ;
 
f16311("none");
}

}
   
function f16311(x){  
//if(x == "points"){Fpoints();return;}
//$('#imgFiltro').removeClass();  
//$('#imgFiltro').addClass(x);  
var T_style = "";
    T_style +=  '-moz-filter :';
    T_style += $('#imgFiltro').css("-moz-filte");      
    T_style += '<br /> -webkit-filter : ' ;
    T_style += $('#imgFiltro').css("-webkit-filter"); 
    T_style += '<br /> -o-filter : ';
    T_style += $('#imgFiltro').css("-o-filter");      
    T_style += '<br /> -ms-filter :';
    T_style += $('#imgFiltro').css("-ms-filter");
    T_style += '<br /> filter : ';
    T_style += $('#imgFiltro').css("filter");  
    document.getElementById('DP2').innerHTML =T_style ;

//alert(x)
}

</script>

2018年4月9日星期一

HTML DOM 事件

鼠標事件
onclick	當用戶點擊某個對像時調用的事件句柄	oncontextmenu	在用戶點擊鼠標右鍵打開上下文菜單時觸發
ondblclick	當用戶雙擊某個對像時調用的事件句柄	onmousedown	鼠標按鈕被按下
onmouseenter	當鼠標指針移動到元素上時觸發	onmouseleave	當鼠標指針移出元素時觸發
onmousemove	鼠標被移動	onmouseover	鼠標移到某元素之上
onmouseout	鼠標從某元素移開	onmouseup	鼠標按鍵被松開
鍵盤事件
onkeydown	某個鍵盤按鍵被按下	onkeypress	某個鍵盤按鍵被按下並松開
onkeyup	某個鍵盤按鍵被松開
框架/對像（Frame/Object）事件
onabort	圖像的加載被中斷( <object>)	onbeforeunload	該事件在即將離開頁面（刷新或關閉）時觸發
onerror	在加載文檔或圖像時發生錯誤( <object>,<body>和 <frameset>)	onhashchange	該事件在當前 URL 的錨部分發生修改時觸發。
onload	一張頁面或一幅圖像完成加載	onpageshow	該事件在用戶訪問頁面時觸發
onpagehide	該事件在用戶離開當前網頁跳轉到另外一個頁面時觸發	onresize	窗口或框架被重新調整大小
onscroll	當文檔被滾動時發生的事件	onunload	用戶退出頁面(<body> 和 <frameset>)
表單事件
onblur	元素失去焦點時觸發	onchange	該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>)
onfocus	元素獲取焦點時觸發	onfocusin	元素即將獲取焦點時觸發
onfocusout	元素即將失去焦點時觸發	oninput	元素獲取用戶輸入時觸發
onreset	表單重置時觸發	onsearch	用戶向搜索域輸入文本時觸發(<input="search">)
onselect	用戶選取文本時觸發 ( <input> 和 <textarea>)	onsubmit	表單提交時觸發
剪貼板事件
oncopy	該事件在用戶拷貝元素內容時觸發	oncut	該事件在用戶剪切元素內容時觸發
onpaste	該事件在用戶粘貼元素內容時觸發
打印事件
onafterprint	該事件在頁面已經開始打印，或者打印窗口已經關閉時觸發	onbeforeprint	該事件在頁面即將開始打印時觸發
拖動事件
ondrag	該事件在元素正在拖動時觸發	ondragend	該事件在用戶完成元素的拖動時觸發
ondragenter	該事件在拖動的元素進入放置目標時觸發	ondragleave	該事件在拖動元素離開放置目標時觸發
ondragover	該事件在拖動元素在放置目標上時觸發	ondragstart	該事件在用戶開始拖動元素時觸發
ondrop	該事件在拖動元素放置在目標區域時觸發
多媒體（Media）事件
onabort	事件在視頻/音頻（audio/video）終止加載時觸發	oncanplay	事件在用戶可以開始播放視頻/音頻（audio/video）時觸發
oncanplaythrough	事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩衝時觸發	ondurationchange	事件在視頻/音頻（audio/video）的時長發生變化時觸發
onemptied	當期播放列表為空時觸發	onended	事件在視頻/音頻（audio/video）播放結束時觸發
onerror	事件在視頻/音頻（audio/video）數據加載期間發生錯誤時觸發	onloadeddata	事件在瀏覽器加載視頻/音頻（audio/video）當前幀時觸發觸發
onloadedmetadata	事件在指定視頻/音頻（audio/video）的元數據加載後觸發	onloadstart	事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發
onpause	事件在視頻/音頻（audio/video）暫停時觸發	onplay	事件在視頻/音頻（audio/video）開始播放時觸發
onplaying	事件在視頻/音頻（audio/video）暫停或者在緩衝後准備重新開始播放時觸發	onprogress	事件在瀏覽器下載指定的視頻/音頻（audio/video）時觸發
onratechange	事件在視頻/音頻（audio/video）的播放速度發送改變時觸發	onseeked	事件在用戶重新定位視頻/音頻（audio/video）的播放位置後觸發
onseeking	事件在用戶開始重新定位視頻/音頻（audio/video）時觸發	onstalled	事件在瀏覽器獲取媒體數據，但媒體數據不可用時觸發。
onsuspend	事件在瀏覽器讀取媒體數據中止時觸發	ontimeupdate	事件在當前的播放位置發送改變時觸發
onvolumechange	事件在音量發生改變時觸發	onwaiting	事件在視頻由於要播放下一幀而需要緩衝時觸發
動畫事件
animationend	該事件在 CSS 動畫結束播放時觸發	animationiteration	該事件在 CSS 動畫重復播放時觸發
animationstart	該事件在 CSS 動畫開始播放時觸發
過渡事件
transitionend	該事件在 CSS 完成過渡後觸發
其他事件
onmessage	該事件通過或者從對像(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發	ononline	該事件在瀏覽器開始在線工作時觸發
onoffline	該事件在瀏覽器開始離線工作時觸發	onpopstate	該事件在窗口的瀏覽歷史（history 對像）發生改變時觸發
onshow	該事件當 <menu> 元素在上下文菜單顯示時觸發	onstorage	該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發
ontoggle	該事件在用戶打開或關閉 <details> 元素時觸發	onwheel	該事件在鼠標滾輪在元素上下滾動時觸發
事件對像常量
CAPTURING-PHASE	當前事件階段為捕獲階段(3)	AT-TARGET	當前事件是目標階段,在評估目標事件(1)
BUBBLING-PHASE	當前的事件為冒泡階段 (2)
事件對像屬性
bubbles	返回布爾值，指示事件是否是起泡事件類型	cancelable	返回布爾值，指示事件是否可擁可取消的默認動作
currentTarget	返回其事件監聽器觸發該事件的元素	eventPhase	返回事件傳播的當前階段
target	返回觸發此事件的元素（事件的目標節點）	timeStamp	返回事件生成的日期和時間
type	返回當前 Event 對像表示的事件的名稱
事件對像方法
initEvent()	初始化新創建的 Event 對像的屬性	preventDefault()	通知瀏覽器不要執行與事件關聯的默認動作
stopPropagation()	不再派發事件
目標事件對像方法
addEventListener()	允許在目標事件中注冊監聽事件(IE8 = attachEvent())	dispatchEvent()	允許發送事件到監聽器上 (IE8 = fireEvent())
removeEventListener()	運行一次注冊在事件目標上的監聽事件(IE8 = detachEvent())
事件監聽對像方法
handleEvent()	把任意對像注冊為事件處理程序
文檔事件對像方法
createEvent()
鼠標/鍵盤事件對像屬性
altKey	返回當事件被觸發時，"ALT" 是否被按下	button	返回當事件被觸發時，哪個鼠標按鈕被點擊
clientX	返回當事件被觸發時，鼠標指針的水平坐標	clientY	返回當事件被觸發時，鼠標指針的垂直坐標
ctrlKey	返回當事件被觸發時，"CTRL" 鍵是否被按下	Location	返回按鍵在設備上的位置
charCode	返回onkeypress事件觸發鍵值的字母代碼	key	在按下按鍵時返回按鍵的標識符
keyCode	返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼
which	返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。
metaKey	返回當事件被觸發時，"meta" 鍵是否被按下	relatedTarget	返回與事件的目標節點相關的節點
screenX	返回當某個事件被觸發時，鼠標指針的水平坐標	screenY	返回當某個事件被觸發時，鼠標指針的垂直坐標
shiftKey	返回當事件被觸發時，"SHIFT" 鍵是否被按下
鼠標/鍵盤事件對像方法
initMouseEvent()	初始化鼠標事件對像的值	initKeyboardEvent()	初始化鍵盤事件對像的值

HTML DOM 事件

鼠標事件
onclick	當用戶點擊某個對像時調用的事件句柄	oncontextmenu	在用戶點擊鼠標右鍵打開上下文菜單時觸發
ondblclick	當用戶雙擊某個對像時調用的事件句柄	onmousedown	鼠標按鈕被按下
onmouseenter	當鼠標指針移動到元素上時觸發	onmouseleave	當鼠標指針移出元素時觸發
onmousemove	鼠標被移動	onmouseover	鼠標移到某元素之上
onmouseout	鼠標從某元素移開	onmouseup	鼠標按鍵被松開
鍵盤事件
onkeydown	某個鍵盤按鍵被按下	onkeypress	某個鍵盤按鍵被按下並松開
onkeyup	某個鍵盤按鍵被松開
框架/對像（Frame/Object）事件
onabort	圖像的加載被中斷( <object>)	onbeforeunload	該事件在即將離開頁面（刷新或關閉）時觸發
onerror	在加載文檔或圖像時發生錯誤( <object>,<body>和 <frameset>)	onhashchange	該事件在當前 URL 的錨部分發生修改時觸發。
onload	一張頁面或一幅圖像完成加載	onpageshow	該事件在用戶訪問頁面時觸發
onpagehide	該事件在用戶離開當前網頁跳轉到另外一個頁面時觸發	onresize	窗口或框架被重新調整大小
onscroll	當文檔被滾動時發生的事件	onunload	用戶退出頁面(<body> 和 <frameset>)
表單事件
onblur	元素失去焦點時觸發	onchange	該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>)
onfocus	元素獲取焦點時觸發	onfocusin	元素即將獲取焦點時觸發
onfocusout	元素即將失去焦點時觸發	oninput	元素獲取用戶輸入時觸發
onreset	表單重置時觸發	onsearch	用戶向搜索域輸入文本時觸發(<input="search">)
onselect	用戶選取文本時觸發 ( <input> 和 <textarea>)	onsubmit	表單提交時觸發
剪貼板事件
oncopy	該事件在用戶拷貝元素內容時觸發	oncut	該事件在用戶剪切元素內容時觸發
onpaste	該事件在用戶粘貼元素內容時觸發
打印事件
onafterprint	該事件在頁面已經開始打印，或者打印窗口已經關閉時觸發	onbeforeprint	該事件在頁面即將開始打印時觸發
拖動事件
ondrag	該事件在元素正在拖動時觸發	ondragend	該事件在用戶完成元素的拖動時觸發
ondragenter	該事件在拖動的元素進入放置目標時觸發	ondragleave	該事件在拖動元素離開放置目標時觸發
ondragover	該事件在拖動元素在放置目標上時觸發	ondragstart	該事件在用戶開始拖動元素時觸發
ondrop	該事件在拖動元素放置在目標區域時觸發
多媒體（Media）事件
onabort	事件在視頻/音頻（audio/video）終止加載時觸發	oncanplay	事件在用戶可以開始播放視頻/音頻（audio/video）時觸發
oncanplaythrough	事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩衝時觸發	ondurationchange	事件在視頻/音頻（audio/video）的時長發生變化時觸發
onemptied	當期播放列表為空時觸發	onended	事件在視頻/音頻（audio/video）播放結束時觸發
onerror	事件在視頻/音頻（audio/video）數據加載期間發生錯誤時觸發	onloadeddata	事件在瀏覽器加載視頻/音頻（audio/video）當前幀時觸發觸發
onloadedmetadata	事件在指定視頻/音頻（audio/video）的元數據加載後觸發	onloadstart	事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發
onpause	事件在視頻/音頻（audio/video）暫停時觸發	onplay	事件在視頻/音頻（audio/video）開始播放時觸發
onplaying	事件在視頻/音頻（audio/video）暫停或者在緩衝後准備重新開始播放時觸發	onprogress	事件在瀏覽器下載指定的視頻/音頻（audio/video）時觸發
onratechange	事件在視頻/音頻（audio/video）的播放速度發送改變時觸發	onseeked	事件在用戶重新定位視頻/音頻（audio/video）的播放位置後觸發
onseeking	事件在用戶開始重新定位視頻/音頻（audio/video）時觸發	onstalled	事件在瀏覽器獲取媒體數據，但媒體數據不可用時觸發。
onsuspend	事件在瀏覽器讀取媒體數據中止時觸發	ontimeupdate	事件在當前的播放位置發送改變時觸發
onvolumechange	事件在音量發生改變時觸發	onwaiting	事件在視頻由於要播放下一幀而需要緩衝時觸發
動畫事件
animationend	該事件在 CSS 動畫結束播放時觸發	animationiteration	該事件在 CSS 動畫重復播放時觸發
animationstart	該事件在 CSS 動畫開始播放時觸發
過渡事件
transitionend	該事件在 CSS 完成過渡後觸發
其他事件
onmessage	該事件通過或者從對像(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發	ononline	該事件在瀏覽器開始在線工作時觸發
onoffline	該事件在瀏覽器開始離線工作時觸發	onpopstate	該事件在窗口的瀏覽歷史（history 對像）發生改變時觸發
onshow	該事件當 <menu> 元素在上下文菜單顯示時觸發	onstorage	該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發
ontoggle	該事件在用戶打開或關閉 <details> 元素時觸發	onwheel	該事件在鼠標滾輪在元素上下滾動時觸發
事件對像常量
CAPTURING-PHASE	當前事件階段為捕獲階段(3)	AT-TARGET	當前事件是目標階段,在評估目標事件(1)
BUBBLING-PHASE	當前的事件為冒泡階段 (2)
事件對像屬性
bubbles	返回布爾值，指示事件是否是起泡事件類型	cancelable	返回布爾值，指示事件是否可擁可取消的默認動作
currentTarget	返回其事件監聽器觸發該事件的元素	eventPhase	返回事件傳播的當前階段
target	返回觸發此事件的元素（事件的目標節點）	timeStamp	返回事件生成的日期和時間
type	返回當前 Event 對像表示的事件的名稱
事件對像方法
initEvent()	初始化新創建的 Event 對像的屬性	preventDefault()	通知瀏覽器不要執行與事件關聯的默認動作
stopPropagation()	不再派發事件
目標事件對像方法
addEventListener()	允許在目標事件中注冊監聽事件(IE8 = attachEvent())	dispatchEvent()	允許發送事件到監聽器上 (IE8 = fireEvent())
removeEventListener()	運行一次注冊在事件目標上的監聽事件(IE8 = detachEvent())
事件監聽對像方法
handleEvent()	把任意對像注冊為事件處理程序
文檔事件對像方法
createEvent()
鼠標/鍵盤事件對像屬性
altKey	返回當事件被觸發時，"ALT" 是否被按下	button	返回當事件被觸發時，哪個鼠標按鈕被點擊
clientX	返回當事件被觸發時，鼠標指針的水平坐標	clientY	返回當事件被觸發時，鼠標指針的垂直坐標
ctrlKey	返回當事件被觸發時，"CTRL" 鍵是否被按下	Location	返回按鍵在設備上的位置
charCode	返回onkeypress事件觸發鍵值的字母代碼	key	在按下按鍵時返回按鍵的標識符
keyCode	返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼
which	返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。
metaKey	返回當事件被觸發時，"meta" 鍵是否被按下	relatedTarget	返回與事件的目標節點相關的節點
screenX	返回當某個事件被觸發時，鼠標指針的水平坐標	screenY	返回當某個事件被觸發時，鼠標指針的垂直坐標
shiftKey	返回當事件被觸發時，"SHIFT" 鍵是否被按下
鼠標/鍵盤事件對像方法
initMouseEvent()	初始化鼠標事件對像的值	initKeyboardEvent()	初始化鍵盤事件對像的值

2018年4月7日星期六

偶數與奇數規則 CSS :nth-child(even) :nth-child(odd)

一種提高易於閱讀大型表格的方法是每，排以色調交替譬如，下面的 table 顯示淺灰色背景的偶數排，以及白底的奇數排，這規則在此非常簡單。
table:nth-child(even) {background: #CCC}
table:nth-child(odd) {background: #FFF}

<table border="1"><tbody>
<tr><th colspan="8">
CSS table tr:first-child {background: red}
</th></tr>
<tr><td>Month
      </td><td>芒果
      </td><td>火龙果 
      </td><td>燈 
      </td><td>奇異果
      </td><td>芒果
      </td><td>哈密瓜
      </td><td>香蕉
</td></tr>
<tr>
      <td>Jan
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>11
      </td><td>11
</td></tr>
<tr>
      <td>Feb
      </td><td>13
      </td><td>15
      </td><td>12
      </td><td>15
      </td><td>15
      </td><td>12
      </td><td>14
</td></tr>
<tr>
      <td>Mar
      </td><td>16
      </td><td>15
      </td><td>14
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Apr
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>17
      </td><td>17
      </td><td>15
      </td><td>15
</td></tr>
<tr>
      <td>May
      </td><td>21
      </td><td>20
      </td><td>20
      </td><td>21
      </td><td>22
      </td><td>20
      </td><td>21
</td></tr>
<tr>
      <td>Jun
      </td><td>24
      </td><td>23
      </td><td>25
      </td><td>24
      </td><td>25
      </td><td>23
      </td><td>25
</td></tr>
<tr>
      <td>Jul
      </td><td>29
      </td><td>28
      </td><td>26
      </td><td>26
      </td><td>27
      </td><td>26
      </td><td>25
</td></tr>
<tr>
      <td>Aug
      </td><td>29
      </td><td>28
      </td><td>27
      </td><td>28
      </td><td>28
      </td><td>27
      </td><td>26
</td></tr>
<tr>
      <td>Sep
      </td><td>24
      </td><td>23
      </td><td>23
      </td><td>26
      </td><td>24
      </td><td>24
      </td><td>24
</td></tr>
<tr>
      <td>Oct
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>19
      </td><td>20
</td></tr>
<tr>
      <td>Nov
      </td><td>18
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Dec
      </td><td>15
      </td><td>13
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>10
      </td><td>13
</td></tr>
<tr><th colspan="8"> table tr:last-child  {background: yellow} 
</th></tr>
</tbody></table>

table.reference th{
 border: 1px solid #000080;
 width:100px;
 height:40px;
}

table.reference td {
 border: 1px solid #000080;
 height:30px;
 text-align: center;
 vertical-align: middle;}

table.reference tr:nth-child(2n+2) {
 background-color: orange 
}

</style>

<table class="reference"><tbody>
<tr><th colspan="8">
CSS table.reference tr:nth-child(2n+2) {background-color: orange}
</th></tr>
<tr><td>Month
      </td><td>芒果
      </td><td>火龙果 
      </td><td>燈 
      </td><td>奇異果
      </td><td>芒果
      </td><td>哈密瓜
      </td><td>香蕉
</td></tr>
<tr>
      <td>Jan
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>11
      </td><td>11
</td></tr>
<tr>
      <td>Feb
      </td><td>13
      </td><td>15
      </td><td>12
      </td><td>15
      </td><td>15
      </td><td>12
      </td><td>14
</td></tr>
<tr>
      <td>Mar
      </td><td>16
      </td><td>15
      </td><td>14
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Apr
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>17
      </td><td>17
      </td><td>15
      </td><td>15
</td></tr>
<tr>
      <td>May
      </td><td>21
      </td><td>20
      </td><td>20
      </td><td>21
      </td><td>22
      </td><td>20
      </td><td>21
</td></tr>
<tr>
      <td>Jun
      </td><td>24
      </td><td>23
      </td><td>25
      </td><td>24
      </td><td>25
      </td><td>23
      </td><td>25
</td></tr>
<tr>
      <td>Jul
      </td><td>29
      </td><td>28
      </td><td>26
      </td><td>26
      </td><td>27
      </td><td>26
      </td><td>25
</td></tr>
<tr>
      <td>Aug
      </td><td>29
      </td><td>28
      </td><td>27
      </td><td>28
      </td><td>28
      </td><td>27
      </td><td>26
</td></tr>
<tr>
      <td>Sep
      </td><td>24
      </td><td>23
      </td><td>23
      </td><td>26
      </td><td>24
      </td><td>24
      </td><td>24
</td></tr>
<tr>
      <td>Oct
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>19
      </td><td>20
</td></tr>
<tr>
      <td>Nov
      </td><td>18
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Dec
      </td><td>15
      </td><td>13
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>10
      </td><td>13
</td></tr>
</tbody></table>

table.reference th{
 border: 1px solid #000080;
 width:100px;
 height:40px;
}

table.reference td {
 border: 1px solid #000080;
 height:30px;
 text-align: center;
 vertical-align: middle;}

table.reference tr:nth-child(3n+2) {
 background-color: orange 
}

</style>

<table class="reference"><tbody>
<tr><th colspan="8">
CSS table.reference tr:nth-child(3n+2) {background-color: orange}
</th></tr>
<tr><td>Month
      </td><td>芒果
      </td><td>火龙果 
      </td><td>燈 
      </td><td>奇異果
      </td><td>芒果
      </td><td>哈密瓜
      </td><td>香蕉
</td></tr>
<tr>
      <td>Jan
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>11
      </td><td>11
</td></tr>
<tr>
      <td>Feb
      </td><td>13
      </td><td>15
      </td><td>12
      </td><td>15
      </td><td>15
      </td><td>12
      </td><td>14
</td></tr>
<tr>
      <td>Mar
      </td><td>16
      </td><td>15
      </td><td>14
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Apr
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>17
      </td><td>17
      </td><td>15
      </td><td>15
</td></tr>
<tr>
      <td>May
      </td><td>21
      </td><td>20
      </td><td>20
      </td><td>21
      </td><td>22
      </td><td>20
      </td><td>21
</td></tr>
<tr>
      <td>Jun
      </td><td>24
      </td><td>23
      </td><td>25
      </td><td>24
      </td><td>25
      </td><td>23
      </td><td>25
</td></tr>
<tr>
      <td>Jul
      </td><td>29
      </td><td>28
      </td><td>26
      </td><td>26
      </td><td>27
      </td><td>26
      </td><td>25
</td></tr>
<tr>
      <td>Aug
      </td><td>29
      </td><td>28
      </td><td>27
      </td><td>28
      </td><td>28
      </td><td>27
      </td><td>26
</td></tr>
<tr>
      <td>Sep
      </td><td>24
      </td><td>23
      </td><td>23
      </td><td>26
      </td><td>24
      </td><td>24
      </td><td>24
</td></tr>
<tr>
      <td>Oct
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>19
      </td><td>20
</td></tr>
<tr>
      <td>Nov
      </td><td>18
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Dec
      </td><td>15
      </td><td>13
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>10
      </td><td>13
</td></tr>
</tbody></table>

table.reference th{
 border: 1px solid #000080;
 width:100px;
 height:40px;
}

table.reference td {
 border: 1px solid #000080;
 height:30px;
 text-align: center;
 vertical-align: middle;}

table.reference tr:first-child{background: red}

table.reference tr:nth-child(2n+3) {
 background-color: orange 
}

</style>

<table class="reference"><tbody>
<tr><th colspan="8">
CSS table.reference tr:first-child {background: red}<br> 第一行為紅色
</th></tr>
<tr><td>Month
      </td><td>芒果
      </td><td>火龙果 
      </td><td>燈 
      </td><td>奇異果
      </td><td>芒果
      </td><td>哈密瓜
      </td><td>香蕉
</td></tr>
<tr>
      <td>Jan
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>11
      </td><td>11
</td></tr>
<tr>
      <td>Feb
      </td><td>13
      </td><td>15
      </td><td>12
      </td><td>15
      </td><td>15
      </td><td>12
      </td><td>14
</td></tr>
<tr>
      <td>Mar
      </td><td>16
      </td><td>15
      </td><td>14
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Apr
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>17
      </td><td>17
      </td><td>15
      </td><td>15
</td></tr>
<tr>
      <td>May
      </td><td>21
      </td><td>20
      </td><td>20
      </td><td>21
      </td><td>22
      </td><td>20
      </td><td>21
</td></tr>
<tr>
      <td>Jun
      </td><td>24
      </td><td>23
      </td><td>25
      </td><td>24
      </td><td>25
      </td><td>23
      </td><td>25
</td></tr>
<tr>
      <td>Jul
      </td><td>29
      </td><td>28
      </td><td>26
      </td><td>26
      </td><td>27
      </td><td>26
      </td><td>25
</td></tr>
<tr>
      <td>Aug
      </td><td>29
      </td><td>28
      </td><td>27
      </td><td>28
      </td><td>28
      </td><td>27
      </td><td>26
</td></tr>
<tr>
      <td>Sep
      </td><td>24
      </td><td>23
      </td><td>23
      </td><td>26
      </td><td>24
      </td><td>24
      </td><td>24
</td></tr>
<tr>
      <td>Oct
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>19
      </td><td>20
</td></tr>
<tr>
      <td>Nov
      </td><td>18
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Dec
      </td><td>15
      </td><td>13
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>10
      </td><td>13
</td></tr>
</tbody></table>

table.reference th{
 border: 1px solid #000080;
 width:100px;
 height:40px;
}

table.reference td {
 border: 1px solid #000080;
 height:30px;
 text-align: center;
 vertical-align: middle;}

table.reference tr:last-child{background: red}

table.reference tr:nth-child(2n+3) {
 background-color: orange 
}

</style>

<table class="reference"><tbody>
<tr><th colspan="8">
CSS table.reference tr:last-child {background: red}<br> 最尾行為紅色
</th></tr>
<tr><td>Month
      </td><td>芒果
      </td><td>火龙果 
      </td><td>燈 
      </td><td>奇異果
      </td><td>芒果
      </td><td>哈密瓜
      </td><td>香蕉
</td></tr>
<tr>
      <td>Jan
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>11
      </td><td>11
</td></tr>
<tr>
      <td>Feb
      </td><td>13
      </td><td>15
      </td><td>12
      </td><td>15
      </td><td>15
      </td><td>12
      </td><td>14
</td></tr>
<tr>
      <td>Mar
      </td><td>16
      </td><td>15
      </td><td>14
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Apr
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>17
      </td><td>17
      </td><td>15
      </td><td>15
</td></tr>
<tr>
      <td>May
      </td><td>21
      </td><td>20
      </td><td>20
      </td><td>21
      </td><td>22
      </td><td>20
      </td><td>21
</td></tr>
<tr>
      <td>Jun
      </td><td>24
      </td><td>23
      </td><td>25
      </td><td>24
      </td><td>25
      </td><td>23
      </td><td>25
</td></tr>
<tr>
      <td>Jul
      </td><td>29
      </td><td>28
      </td><td>26
      </td><td>26
      </td><td>27
      </td><td>26
      </td><td>25
</td></tr>
<tr>
      <td>Aug
      </td><td>29
      </td><td>28
      </td><td>27
      </td><td>28
      </td><td>28
      </td><td>27
      </td><td>26
</td></tr>
<tr>
      <td>Sep
      </td><td>24
      </td><td>23
      </td><td>23
      </td><td>26
      </td><td>24
      </td><td>24
      </td><td>24
</td></tr>
<tr>
      <td>Oct
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>19
      </td><td>20
</td></tr>
<tr>
      <td>Nov
      </td><td>18
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Dec
      </td><td>15
      </td><td>13
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>10
      </td><td>13
</td></tr>
</tbody></table>

table.reference th{
 border: 1px solid #000080;
 width:100px;
 height:40px;
}

table.reference td {
 border: 1px solid #000080;
 height:30px;
 text-align: center;
 vertical-align: middle;}

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

</style>
<table class="reference">
<col><col><col><col><col><col><col><col>

<tbody>
<tr><td colspan="8">
col:first-child {background: #FF0}<br>
col:nth-child(2n+3) {background: #CCC}
</td></tr>
<tr><td>Month
      </td><td>芒果
      </td><td>火龙果 
      </td><td>燈 
      </td><td>奇異果
      </td><td>芒果
      </td><td>哈密瓜
      </td><td>香蕉
</td></tr><tr>
      <td>Jan
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>11
      </td><td>11
</td></tr>
<tr>
      <td>Feb
      </td><td>13
      </td><td>15
      </td><td>12
      </td><td>15
      </td><td>15
      </td><td>12
      </td><td>14
</td></tr>
<tr>
      <td>Mar
      </td><td>16
      </td><td>15
      </td><td>14
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Apr
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>17
      </td><td>17
      </td><td>15
      </td><td>15
</td></tr>
<tr>
      <td>May
      </td><td>21
      </td><td>20
      </td><td>20
      </td><td>21
      </td><td>22
      </td><td>20
      </td><td>21
</td></tr>
<tr>
      <td>Jun
      </td><td>24
      </td><td>23
      </td><td>25
      </td><td>24
      </td><td>25
      </td><td>23
      </td><td>25
</td></tr>
<tr>
      <td>Jul
      </td><td>29
      </td><td>28
      </td><td>26
      </td><td>26
      </td><td>27
      </td><td>26
      </td><td>25
</td></tr>
<tr>
      <td>Aug
      </td><td>29
      </td><td>28
      </td><td>27
      </td><td>28
      </td><td>28
      </td><td>27
      </td><td>26
</td></tr>
<tr>
      <td>Sep
      </td><td>24
      </td><td>23
      </td><td>23
      </td><td>26
      </td><td>24
      </td><td>24
      </td><td>24
</td></tr>
<tr>
      <td>Oct
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>19
      </td><td>20
</td></tr>
<tr>
      <td>Nov
      </td><td>18
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Dec
      </td><td>15
      </td><td>13
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>10
      </td><td>13
</td></tr>
</tbody></table>

table.reference th{
 border: 1px solid #000080;
 width:100px;
 height:40px;
}

table.reference td {
 border: 1px solid #000080;
 height:30px;
 text-align: center;
 vertical-align: middle;}

table.reference tr:nth-child(-n+5) {
 background-color: orange 
}

table.reference tr:nth-child(n+8) {
 background-color: red
}
</style>

<table class="reference"><tbody>
<tr><th colspan="8">
table.reference tr:nth-child(-n+5){ background-color: orange }<br>
table.reference tr:nth-child(n+8) { background-color: red }<br>
</th></tr>
<tr><td>Month
      </td><td>芒果
      </td><td>火龙果 
      </td><td>燈 
      </td><td>奇異果
      </td><td>芒果
      </td><td>哈密瓜
      </td><td>香蕉
</td></tr>
<tr>
      <td>Jan
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>14
      </td><td>11
      </td><td>11
</td></tr>
<tr>
      <td>Feb
      </td><td>13
      </td><td>15
      </td><td>12
      </td><td>15
      </td><td>15
      </td><td>12
      </td><td>14
</td></tr>
<tr>
      <td>Mar
      </td><td>16
      </td><td>15
      </td><td>14
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Apr
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>17
      </td><td>17
      </td><td>15
      </td><td>15
</td></tr>
<tr>
      <td>May
      </td><td>21
      </td><td>20
      </td><td>20
      </td><td>21
      </td><td>22
      </td><td>20
      </td><td>21
</td></tr>
<tr>
      <td>Jun
      </td><td>24
      </td><td>23
      </td><td>25
      </td><td>24
      </td><td>25
      </td><td>23
      </td><td>25
</td></tr>
<tr>
      <td>Jul
      </td><td>29
      </td><td>28
      </td><td>26
      </td><td>26
      </td><td>27
      </td><td>26
      </td><td>25
</td></tr>
<tr>
      <td>Aug
      </td><td>29
      </td><td>28
      </td><td>27
      </td><td>28
      </td><td>28
      </td><td>27
      </td><td>26
</td></tr>
<tr>
      <td>Sep
      </td><td>24
      </td><td>23
      </td><td>23
      </td><td>26
      </td><td>24
      </td><td>24
      </td><td>24
</td></tr>
<tr>
      <td>Oct
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>22
      </td><td>20
      </td><td>19
      </td><td>20
</td></tr>
<tr>
      <td>Nov
      </td><td>18
      </td><td>17
      </td><td>16
      </td><td>17
      </td><td>16
      </td><td>15
      </td><td>14
</td></tr>
<tr>
      <td>Dec
      </td><td>15
      </td><td>13
      </td><td>13
      </td><td>14
      </td><td>13
      </td><td>10
      </td><td>13
</td></tr>
</tbody></table>

Edit

HTML DOM 事件

HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。

事件通常與函數結合使用，函數不會在事件發生前被執行！ (如用戶點擊按鈕)。

提示： 在 W3C 2 級 DOM 事件中規範了事件模型。

HTML DOM 事件

DOM： 指明使用的 DOM 屬性級別。

鼠標事件

屬性	描述	DOM
onclick	當用戶點擊某個對像時調用的事件句柄。	2
oncontextmenu	在用戶點擊鼠標右鍵打開上下文菜單時觸發
ondblclick	當用戶雙擊某個對像時調用的事件句柄。	2
onmousedown	鼠標按鈕被按下。	2
onmouseenter	當鼠標指針移動到元素上時觸發。	2
onmouseleave	當鼠標指針移出元素時觸發	2
onmousemove	鼠標被移動。	2
onmouseover	鼠標移到某元素之上。	2
onmouseout	鼠標從某元素移開。	2
onmouseup	鼠標按鍵被松開。	2

鍵盤事件

屬性	描述	DOM
onkeydown	某個鍵盤按鍵被按下。	2
onkeypress	某個鍵盤按鍵被按下並松開。	2
onkeyup	某個鍵盤按鍵被松開。	2

框架/對像（Frame/Object）事件

屬性	描述	DOM
onabort	圖像的加載被中斷。 ( <object>)	2
onbeforeunload	該事件在即將離開頁面（刷新或關閉）時觸發	2
onerror	在加載文檔或圖像時發生錯誤。 ( <object>, <body>和 <frameset>)
onhashchange	該事件在當前 URL 的錨部分發生修改時觸發。
onload	一張頁面或一幅圖像完成加載。	2
onpageshow	該事件在用戶訪問頁面時觸發
onpagehide	該事件在用戶離開當前網頁跳轉到另外一個頁面時觸發
onresize	窗口或框架被重新調整大小。	2
onscroll	當文檔被滾動時發生的事件。	2
onunload	用戶退出頁面。 ( <body> 和 <frameset>)	2

表單事件

屬性	描述	DOM
onblur	元素失去焦點時觸發	2
onchange	該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>)	2
onfocus	元素獲取焦點時觸發	2
onfocusin	元素即將獲取焦點時觸發	2
onfocusout	元素即將失去焦點時觸發	2
oninput	元素獲取用戶輸入時觸發	3
onreset	表單重置時觸發	2
onsearch	用戶向搜索域輸入文本時觸發 ( <input="search">)
onselect	用戶選取文本時觸發 ( <input> 和 <textarea>)	2
onsubmit	表單提交時觸發	2

剪貼板事件

屬性	描述	DOM
oncopy	該事件在用戶拷貝元素內容時觸發
oncut	該事件在用戶剪切元素內容時觸發
onpaste	該事件在用戶粘貼元素內容時觸發

打印事件

屬性	描述	DOM
onafterprint	該事件在頁面已經開始打印，或者打印窗口已經關閉時觸發
onbeforeprint	該事件在頁面即將開始打印時觸發

拖動事件

事件	描述	DOM
ondrag	該事件在元素正在拖動時觸發
ondragend	該事件在用戶完成元素的拖動時觸發
ondragenter	該事件在拖動的元素進入放置目標時觸發
ondragleave	該事件在拖動元素離開放置目標時觸發
ondragover	該事件在拖動元素在放置目標上時觸發
ondragstart	該事件在用戶開始拖動元素時觸發
ondrop	該事件在拖動元素放置在目標區域時觸發

多媒體（Media）事件

事件	描述	DOM
onabort	事件在視頻/音頻（audio/video）終止加載時觸發。
oncanplay	事件在用戶可以開始播放視頻/音頻（audio/video）時觸發。
oncanplaythrough	事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩衝時觸發。
ondurationchange	事件在視頻/音頻（audio/video）的時長發生變化時觸發。
onemptied	當期播放列表為空時觸發
onended	事件在視頻/音頻（audio/video）播放結束時觸發。
onerror	事件在視頻/音頻（audio/video）數據加載期間發生錯誤時觸發。
onloadeddata	事件在瀏覽器加載視頻/音頻（audio/video）當前幀時觸發觸發。
onloadedmetadata	事件在指定視頻/音頻（audio/video）的元數據加載後觸發。
onloadstart	事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發。
onpause	事件在視頻/音頻（audio/video）暫停時觸發。
onplay	事件在視頻/音頻（audio/video）開始播放時觸發。
onplaying	事件在視頻/音頻（audio/video）暫停或者在緩衝後准備重新開始播放時觸發。
onprogress	事件在瀏覽器下載指定的視頻/音頻（audio/video）時觸發。
onratechange	事件在視頻/音頻（audio/video）的播放速度發送改變時觸發。
onseeked	事件在用戶重新定位視頻/音頻（audio/video）的播放位置後觸發。
onseeking	事件在用戶開始重新定位視頻/音頻（audio/video）時觸發。
onstalled	事件在瀏覽器獲取媒體數據，但媒體數據不可用時觸發。
onsuspend	事件在瀏覽器讀取媒體數據中止時觸發。
ontimeupdate	事件在當前的播放位置發送改變時觸發。
onvolumechange	事件在音量發生改變時觸發。
onwaiting	事件在視頻由於要播放下一幀而需要緩衝時觸發。

動畫事件

事件	描述	DOM
animationend	該事件在 CSS 動畫結束播放時觸發
animationiteration	該事件在 CSS 動畫重復播放時觸發
animationstart	該事件在 CSS 動畫開始播放時觸發

過渡事件

事件	描述	DOM
transitionend	該事件在 CSS 完成過渡後觸發。

其他事件

事件	描述	DOM
onmessage	該事件通過或者從對像(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發
onmousewheel	已廢棄。使用 onwheel 事件替代
ononline	該事件在瀏覽器開始在線工作時觸發。
onoffline	該事件在瀏覽器開始離線工作時觸發。
onpopstate	該事件在窗口的瀏覽歷史（history 對像）發生改變時觸發。
onshow	該事件當 <menu> 元素在上下文菜單顯示時觸發
onstorage	該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發
ontoggle	該事件在用戶打開或關閉 <details> 元素時觸發
onwheel	該事件在鼠標滾輪在元素上下滾動時觸發

事件對像

常量

靜態變量	描述	DOM
CAPTURING-PHASE	當前事件階段為捕獲階段(3)	1
AT-TARGET	當前事件是目標階段,在評估目標事件(1)	2
BUBBLING-PHASE	當前的事件為冒泡階段 (2)	3

屬性

屬性	描述	DOM
bubbles	返回布爾值，指示事件是否是起泡事件類型。	2
cancelable	返回布爾值，指示事件是否可擁可取消的默認動作。	2
currentTarget	返回其事件監聽器觸發該事件的元素。	2
eventPhase	返回事件傳播的當前階段。	2
target	返回觸發此事件的元素（事件的目標節點）。	2
timeStamp	返回事件生成的日期和時間。	2
type	返回當前 Event 對像表示的事件的名稱。	2

方法

方法	描述	DOM
initEvent()	初始化新創建的 Event 對像的屬性。	2
preventDefault()	通知瀏覽器不要執行與事件關聯的默認動作。	2
stopPropagation()	不再派發事件。	2

目標事件對像

方法

方法	描述	DOM
addEventListener()	允許在目標事件中注冊監聽事件(IE8 = attachEvent())	2
dispatchEvent()	允許發送事件到監聽器上 (IE8 = fireEvent())	2
removeEventListener()	運行一次注冊在事件目標上的監聽事件(IE8 = detachEvent())	2

事件監聽對像

方法

方法	描述	DOM
handleEvent()	把任意對像注冊為事件處理程序	2

文檔事件對像

方法

方法	描述	DOM
createEvent()		2

鼠標/鍵盤事件對像

屬性

屬性	描述	DOM
altKey	返回當事件被觸發時，"ALT" 是否被按下。	2
button	返回當事件被觸發時，哪個鼠標按鈕被點擊。	2
clientX	返回當事件被觸發時，鼠標指針的水平坐標。	2
clientY	返回當事件被觸發時，鼠標指針的垂直坐標。	2
ctrlKey	返回當事件被觸發時，"CTRL" 鍵是否被按下。	2
Location	返回按鍵在設備上的位置	3
charCode	返回onkeypress事件觸發鍵值的字母代碼。	2
key	在按下按鍵時返回按鍵的標識符。	3
keyCode	返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。	2
which	返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。	2
metaKey	返回當事件被觸發時，"meta" 鍵是否被按下。	2
relatedTarget	返回與事件的目標節點相關的節點。	2
screenX	返回當某個事件被觸發時，鼠標指針的水平坐標。	2
screenY	返回當某個事件被觸發時，鼠標指針的垂直坐標。	2
shiftKey	返回當事件被觸發時，"SHIFT" 鍵是否被按下。	2

方法

方法	描述	W3C
initMouseEvent()	初始化鼠標事件對像的值	2
initKeyboardEvent()	初始化鍵盤事件對像的值	3

HTML DOM 事件

HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。

事件通常與函數結合使用，函數不會在事件發生前被執行！ (如用戶點擊按鈕)。

提示： 在 W3C 2 級 DOM 事件中規範了事件模型。

HTML DOM 事件

DOM： 指明使用的 DOM 屬性級別。

鼠標事件

屬性	描述	DOM
onclick	當用戶點擊某個對像時調用的事件句柄。	2
oncontextmenu	在用戶點擊鼠標右鍵打開上下文菜單時觸發
ondblclick	當用戶雙擊某個對像時調用的事件句柄。	2
onmousedown	鼠標按鈕被按下。	2
onmouseenter	當鼠標指針移動到元素上時觸發。	2
onmouseleave	當鼠標指針移出元素時觸發	2
onmousemove	鼠標被移動。	2
onmouseover	鼠標移到某元素之上。	2
onmouseout	鼠標從某元素移開。	2
onmouseup	鼠標按鍵被松開。	2

鍵盤事件

屬性	描述	DOM
onkeydown	某個鍵盤按鍵被按下。	2
onkeypress	某個鍵盤按鍵被按下並松開。	2
onkeyup	某個鍵盤按鍵被松開。	2

框架/對像（Frame/Object）事件

屬性	描述	DOM
onabort	圖像的加載被中斷。 ( <object>)	2
onbeforeunload	該事件在即將離開頁面（刷新或關閉）時觸發	2
onerror	在加載文檔或圖像時發生錯誤。 ( <object>, <body>和 <frameset>)
onhashchange	該事件在當前 URL 的錨部分發生修改時觸發。
onload	一張頁面或一幅圖像完成加載。	2
onpageshow	該事件在用戶訪問頁面時觸發
onpagehide	該事件在用戶離開當前網頁跳轉到另外一個頁面時觸發
onresize	窗口或框架被重新調整大小。	2
onscroll	當文檔被滾動時發生的事件。	2
onunload	用戶退出頁面。 ( <body> 和 <frameset>)	2

表單事件

屬性	描述	DOM
onblur	元素失去焦點時觸發	2
onchange	該事件在表單元素的內容改變時觸發( <input>, <keygen>, <select>, 和 <textarea>)	2
onfocus	元素獲取焦點時觸發	2
onfocusin	元素即將獲取焦點時觸發	2
onfocusout	元素即將失去焦點時觸發	2
oninput	元素獲取用戶輸入時觸發	3
onreset	表單重置時觸發	2
onsearch	用戶向搜索域輸入文本時觸發 ( <input="search">)
onselect	用戶選取文本時觸發 ( <input> 和 <textarea>)	2
onsubmit	表單提交時觸發	2

剪貼板事件

屬性	描述	DOM
oncopy	該事件在用戶拷貝元素內容時觸發
oncut	該事件在用戶剪切元素內容時觸發
onpaste	該事件在用戶粘貼元素內容時觸發

打印事件

屬性	描述	DOM
onafterprint	該事件在頁面已經開始打印，或者打印窗口已經關閉時觸發
onbeforeprint	該事件在頁面即將開始打印時觸發

拖動事件

事件	描述	DOM
ondrag	該事件在元素正在拖動時觸發
ondragend	該事件在用戶完成元素的拖動時觸發
ondragenter	該事件在拖動的元素進入放置目標時觸發
ondragleave	該事件在拖動元素離開放置目標時觸發
ondragover	該事件在拖動元素在放置目標上時觸發
ondragstart	該事件在用戶開始拖動元素時觸發
ondrop	該事件在拖動元素放置在目標區域時觸發

多媒體（Media）事件

事件	描述	DOM
onabort	事件在視頻/音頻（audio/video）終止加載時觸發。
oncanplay	事件在用戶可以開始播放視頻/音頻（audio/video）時觸發。
oncanplaythrough	事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩衝時觸發。
ondurationchange	事件在視頻/音頻（audio/video）的時長發生變化時觸發。
onemptied	當期播放列表為空時觸發
onended	事件在視頻/音頻（audio/video）播放結束時觸發。
onerror	事件在視頻/音頻（audio/video）數據加載期間發生錯誤時觸發。
onloadeddata	事件在瀏覽器加載視頻/音頻（audio/video）當前幀時觸發觸發。
onloadedmetadata	事件在指定視頻/音頻（audio/video）的元數據加載後觸發。
onloadstart	事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發。
onpause	事件在視頻/音頻（audio/video）暫停時觸發。
onplay	事件在視頻/音頻（audio/video）開始播放時觸發。
onplaying	事件在視頻/音頻（audio/video）暫停或者在緩衝後准備重新開始播放時觸發。
onprogress	事件在瀏覽器下載指定的視頻/音頻（audio/video）時觸發。
onratechange	事件在視頻/音頻（audio/video）的播放速度發送改變時觸發。
onseeked	事件在用戶重新定位視頻/音頻（audio/video）的播放位置後觸發。
onseeking	事件在用戶開始重新定位視頻/音頻（audio/video）時觸發。
onstalled	事件在瀏覽器獲取媒體數據，但媒體數據不可用時觸發。
onsuspend	事件在瀏覽器讀取媒體數據中止時觸發。
ontimeupdate	事件在當前的播放位置發送改變時觸發。
onvolumechange	事件在音量發生改變時觸發。
onwaiting	事件在視頻由於要播放下一幀而需要緩衝時觸發。

動畫事件

事件	描述	DOM
animationend	該事件在 CSS 動畫結束播放時觸發
animationiteration	該事件在 CSS 動畫重復播放時觸發
animationstart	該事件在 CSS 動畫開始播放時觸發

過渡事件

事件	描述	DOM
transitionend	該事件在 CSS 完成過渡後觸發。

其他事件

事件	描述	DOM
onmessage	該事件通過或者從對像(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發
onmousewheel	已廢棄。使用 onwheel 事件替代
ononline	該事件在瀏覽器開始在線工作時觸發。
onoffline	該事件在瀏覽器開始離線工作時觸發。
onpopstate	該事件在窗口的瀏覽歷史（history 對像）發生改變時觸發。
onshow	該事件當 <menu> 元素在上下文菜單顯示時觸發
onstorage	該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發
ontoggle	該事件在用戶打開或關閉 <details> 元素時觸發
onwheel	該事件在鼠標滾輪在元素上下滾動時觸發

事件對像

常量

靜態變量	描述	DOM
CAPTURING-PHASE	當前事件階段為捕獲階段(3)	1
AT-TARGET	當前事件是目標階段,在評估目標事件(1)	2
BUBBLING-PHASE	當前的事件為冒泡階段 (2)	3

屬性

屬性	描述	DOM
bubbles	返回布爾值，指示事件是否是起泡事件類型。	2
cancelable	返回布爾值，指示事件是否可擁可取消的默認動作。	2
currentTarget	返回其事件監聽器觸發該事件的元素。	2
eventPhase	返回事件傳播的當前階段。	2
target	返回觸發此事件的元素（事件的目標節點）。	2
timeStamp	返回事件生成的日期和時間。	2
type	返回當前 Event 對像表示的事件的名稱。	2

方法

方法	描述	DOM
initEvent()	初始化新創建的 Event 對像的屬性。	2
preventDefault()	通知瀏覽器不要執行與事件關聯的默認動作。	2
stopPropagation()	不再派發事件。	2

目標事件對像

方法

方法	描述	DOM
addEventListener()	允許在目標事件中注冊監聽事件(IE8 = attachEvent())	2
dispatchEvent()	允許發送事件到監聽器上 (IE8 = fireEvent())	2
removeEventListener()	運行一次注冊在事件目標上的監聽事件(IE8 = detachEvent())	2

事件監聽對像

方法

方法	描述	DOM
handleEvent()	把任意對像注冊為事件處理程序	2

文檔事件對像

方法

方法	描述	DOM
createEvent()		2

鼠標/鍵盤事件對像

屬性

屬性	描述	DOM
altKey	返回當事件被觸發時，"ALT" 是否被按下。	2
button	返回當事件被觸發時，哪個鼠標按鈕被點擊。	2
clientX	返回當事件被觸發時，鼠標指針的水平坐標。	2
clientY	返回當事件被觸發時，鼠標指針的垂直坐標。	2
ctrlKey	返回當事件被觸發時，"CTRL" 鍵是否被按下。	2
Location	返回按鍵在設備上的位置	3
charCode	返回onkeypress事件觸發鍵值的字母代碼。	2
key	在按下按鍵時返回按鍵的標識符。	3
keyCode	返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。	2
which	返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼。	2
metaKey	返回當事件被觸發時，"meta" 鍵是否被按下。	2
relatedTarget	返回與事件的目標節點相關的節點。	2
screenX	返回當某個事件被觸發時，鼠標指針的水平坐標。	2
screenY	返回當某個事件被觸發時，鼠標指針的垂直坐標。	2
shiftKey	返回當事件被觸發時，"SHIFT" 鍵是否被按下。	2

方法

方法	描述	W3C
initMouseEvent()	初始化鼠標事件對像的值	2
initKeyboardEvent()	初始化鍵盤事件對像的值	3

2018年4月3日星期二

限制輸入字符

<input Text > 限制輸入格式

<input Text > 限制輸入格式，指的就是在網頁的input text輸入文字時，依據特定格式，阻擋不合規格的文字例如 : 純數字的及 + - * / . 除了數字之外. HTML select option 下拉式選單範例。

Unicode 編碼轉換工具

訂閱：文章 (Atom)

2018年7月28日 星期六

auto-resize a img fit into div

2018年7月27日 星期五

DIV 內置入 jpg 圖片

2018年7月25日 星期三

toggle() 切換顯示或是隱藏

toggle() 切換顯示或是隱藏

2018年4月10日 星期二

CSS Filters濾鏡效果

2018年4月9日 星期一

2018年4月7日 星期六

偶數與奇數規則 CSS :nth-child(even) :nth-child(odd)

HTML DOM 事件

HTML DOM 事件

鼠標事件

鍵盤事件

框架/對像（Frame/Object）事件

表單事件

剪貼板事件

打印事件

拖動事件

多媒體（Media）事件

動畫事件

過渡事件

其他事件

事件對像

常量

屬性

方法

目標事件對像

方法

事件監聽對像

方法

文檔事件對像

方法

鼠標/鍵盤事件對像

屬性

方法

HTML DOM 事件

HTML DOM 事件

鼠標事件

鍵盤事件

框架/對像（Frame/Object）事件

表單事件

剪貼板事件

打印事件

拖動事件

多媒體（Media）事件

動畫事件

過渡事件

其他事件

事件對像

常量

屬性

方法

目標事件對像

方法

事件監聽對像

方法

文檔事件對像

方法

鼠標/鍵盤事件對像

屬性

方法

2018年4月3日 星期二

<input Text > 限制輸入格式

Unicode 編碼轉換工具

Unicode 編碼轉換工具

2018年7月28日星期六

2018年7月27日星期五

2018年7月25日星期三

2018年4月10日星期二

2018年4月9日星期一

2018年4月7日星期六

2018年4月3日星期二