HTML Select Javascript 控制

HTML Select Javascript 控制

// 1. 取值方式
document.forms[0].demoSel.options[document.forms[0].demoSel.selectedIndex].value

// 2. 選取對應 下拉
var compElements = document.forms[0].demoSel;
for (var i=0; i< compElements.length; i++){
//loop through all form elements
if (compElements[i].value == company_id+","+company_brief){
compElements[i].checked = true;
}
}


Javascript壓縮工具-yui compressor

yui compressor

可以將Javascript進行壓縮整理，加快執行效率

動態iframe使用

1. iframe使用的js檔案內容

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0

function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"

if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax 在最後面加一點高度以避免頁面被切
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight + 20;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax 在最後面加一點高度以避免頁面被切
pTar.height = pTar.Document.body.scrollHeight + 20;
}
}
}


2. 在iframe內屬性加入 id以及 onload function事件

// scrolling 設定成auto可以在載入非相同 DomanName 的頁面時，自動出現scrolling捲軸
<iframe name="main" id="myTestFrameID1" onload="javascript:dyniframesize('myTestFrameID1');" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" src="index1.jsp" width="800">main</iframe>


使用JavaScript驗證身份證號碼及其原理(轉)

使用JavaScript驗證身份證號碼及其原理
文∕趙英傑

電子商務或者一般的會員註冊網站，經常需要使用身份證號碼驗證程式。身份證號碼有一定的組成規則，以台灣地區為例，首碼一定是英文字母，後面跟著代表性別的數字1或2，然後再銜接8個數字。A123456789是一個合格的身份證號碼，驗證原理如下圖所示：

驗證身份證號碼

底下是驗證此號碼是否合格的計算公式：

驗證身份證號碼

根據上圖的說明，我們可以用JavaScript的正規表達式（Regular Expression），加上簡易的字串與數學運算式，寫出如下的驗證函數：

function checkID(idStr){
// 依照字母的編號排列，存入陣列備用。
var letters = new Array('A', 'B', 'C', 'D',
'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M',
'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
'X', 'Y', 'W', 'Z', 'I', 'O');
// 儲存各個乘數
var multiply = new Array(1, 9, 8, 7, 6, 5,
4, 3, 2, 1);
var nums = new Array(2);
var firstChar;
var firstNum;
var lastNum;
var total = 0;
// 撰寫「正規表達式」。第一個字為英文字母，
// 第二個字為1或2，後面跟著8個數字，不分大小寫。
var regExpID=/^[a-z](1|2)\d{8}$/i;
// 使用「正規表達式」檢驗格式
if (idStr.search(regExpID)==-1) {
// 基本格式錯誤
alert("請仔細填寫身份證號碼");
return false;
} else {
// 取出第一個字元和最後一個數字。
firstChar = idStr.charAt(0).toUpperCase();
lastNum = idStr.charAt(9);
}
// 找出第一個字母對應的數字，並轉換成兩位數數字。
for (var i=0; i<26; i++) {
if (firstChar == letters[i]) {
firstNum = i + 10;
nums[0] = Math.floor(firstNum / 10);
nums[1] = firstNum - (nums[0] * 10);
break;
}
}
// 執行加總計算
for(var i=0; i < multiply.length; i++){
if (i<2) {
total += nums[i] * multiply[i];
} else {
total += parseInt(idStr.charAt(i-1)) *
multiply[i];
}
}
//規則一餘數為零，且檢查碼需為零
if (lastNum == 0 && (total % 10) != lastNum ){
alert("身份證號碼寫錯了！");
return false;
}
//規則二餘數與檢查碼需相符
if (lastNum != 0 && (10 - (total % 10))!= lastNum) {
alert("身份證號碼寫錯了！");
return false;
}
return true;
}


轉貼來源

Blog中設定顯示 語法code 使用 css

1. 設定 HTML 標籤，設定使用 <code> ... </code> 來作為語法標籤
2. 在自訂 >版面配置 > 修改HTML 加入基本 css樣式表

code {
white-space: pre;
display: block;
margin: 5px;
border-collapse:collapse;
background-color: #CCCCCC;
}

3. 在來在code語法前後加上 <code> 這邊加入要顯示的語法 </code> 這樣就大功告成摟

Javascript正規化的幾個小例子

1. 判斷不可有中文

function checkfileName(cname) {
var svalue = cname.substring(cname.lastIndexOf("\\") + 1);
var filter = new RegExp("^(\\w|\\.)");
if (filter.exec(svalue)!= null){
return true;
}else{
return false;
}
}

if ($("#file1").val()!="" && !checkfileName($("#file1").val())) {
alert("上傳檔案名稱不可有中文，請確認!!");
$("#file1").focus();
return;
}


2. 判斷不能輸入數字 空格

function checkcnameErr(cname) {
var filter = new RegExp("(\\d|\\s)");

if (filter.exec(cname)!= null){
return true;
}else{
return false;
}
}

if (checkcnameErr($("#CNAME").val())){
alert("「旅客中文姓名」填寫錯誤，請確認!!");
$("#CNAME").focus();
return;
}


3. 判斷 E-mail

function emailCheck(email) {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(email)) {
return true;
}else{
//alert('Please provide a valid email address');
return false;
}
}

4.判斷日期格式是否正確

function isDateYYMMDD(str){
if(!str.match(/^\d{4}\-\d\d?\-\d\d?$/)){
return false;
}
var ar=str.replace(/\-0/g,"-").split("-");
ar = new Array(parseInt(ar[0]) , parseInt(ar[1])-1,parseInt(ar[2]));
var d = new Date(ar[0] , ar[1] , ar[2]);
return d.getFullYear()==ar[0]&&d.getMonth()==ar[1] && d.getDate()==ar[2];
}


5.驗證是否為正整數

function isNumber(oNum) {
if(!oNum) return false;
var strP=/^\d+(\.\d+)?$/;
if(!strP.test(oNum)) return false;
try{
if(parseFloat(oNum)!=oNum) return false;

} catch(ex) {
return false;
}
return true;
}


6. 判斷是否為整數2

function isInt(s) {
var reg = /^[0-9]+$/g;
if (!reg.test(s.value))
s.value = s.defaultValue;
}

// 在輸入方塊中加入
onBlur="isInt(this)"


7. 檢查輸入必須為英文及數字

function checkUserId(){
var operVal = form1.operID.value;
var reg = new RegExp("(([A-Z][0-9])+|([0-9][A-Z])+)");
if(operVal!="" && !reg.exec(operVal)){
alert("使用者代號應為英數字");
return false;
}
return true;
}


IE6.0 中使用 showModalDialog 視窗開啟 href=javascript 錯誤

在 IE6.0 中使用 showModalDialog 開啟 a href
使用 javascript 會引起開啟空白頁的錯誤

ex : <a href="javascript:showLink('xxx');">顯示內容</a">

用以上方式會在 IE6.0 版本中點選，會自動開啟新視窗，
連結會是 javascript:showLink('xxx');

如果要用以上方式的話就要修改為

<a href="#" onclick="showLink('xxx');">顯示內容</a">

用以上方式才能正常在 showModalDialog 視窗 裡面正常觸發開啟 ajax 事件，
我想應該 只要在 showModalDialog 視窗，
應該都是會碰到 href=javascript:showLink('xxx');
這個問題才是

在FireFox中如欲遇到相同名稱的 input 類別時可以用 getElementsByName 處理

在FireFox中如欲遇到相同名稱的 input 類別時可以用 getElementsByName 處理
ex:
if (document.getElementsByName("pay_kind")[0].checked == false &&
document.getElementsByName("pay_kind")[1].checked == false &&
document.getElementsByName("pay_kind")[2].checked == false){
.....運算式
}

alert加斷行符號

找了很久 ，但是...沒錯只要下面這樣子...

alert('您有＊欄位未填，請回上頁填寫。\r\nItem(s) with ＊ unfilled. Please return to the previous page.');

用正規表顯示千位貨幣顯示方式

<script language="JavaScript">

<!--

n="1279834847944074100465236.33"

re=/(\d{1,3})(?=(\d{3})+(?:$|\.))/g

n1=n.replace(re,"$1,")

alert(n+"\r\n"+n1)

//-->

</script>

form.elements的使用問題

今天在使用第一種鎖定頁面中輸入方塊 text & textarea 的時候，在某些頁面可以正常執行，但某些頁面不知道是什麼原因，查不到錯誤只好在改成下面的第二種方式

第一種 鎖定 text & textarea
function lostate(){
for (var i = 0; i < savform.elements.length; i++) {
var element = savform.elements[i];
if (['input', 'select', 'textarea'].include(element.tagName.toLowerCase())){
alert(element.tagName.toLowerCase());
//element.blur();
element.disabled = 'false';
}
}
}

第二種 鎖定 text & textarea
function lostate(){
for (var i = 0; i < savform.elements.length; i++) {
if (element.type =="text" || element.type =="button" || element.type =="file"){
element.disabled = "false";
}
}
}

Google的 ajax 語系轉換

Google的 ajax 語系轉換

document 說明

escape,encodeURI,encodeURIComponent

在Javascript若是要傳遞中文參數(Get)的候時，是用函式去做參數的編碼。

以下部分是網路找到的編碼方式：
javascript 中 escape,encodeURI 區別？

js對文字進行編碼涉及3個函數：escape,encodeURI,encodeURIComponent，相應3個解碼函數：unescape,decodeURI,decodeURIComponent

1、   傳遞參數時需要使用encodeURIComponent，這樣組合的url才不會被#等特殊字元截斷。                            

例如：<script language="javascript">document.write('<a href="http://passport.baidu.com/?logout&aid=7&u= +encodeURIComponent("http://cang.baidu.com/bruce42")+">退出</a>');</script>

2、   進行url跳轉時可以整體使用encodeURI

例如：Location.href=encodeURI("http://cang.baidu.com/do/s?word=百度&ct=21");

3、   js使用資料時可以使用escape

例如：搜藏中history紀錄。

4、   escape對0-255以外的unicode值進行編碼時輸出%u****格式，其他情況下escape，encodeURI，encodeURIComponent編碼結果相同。


最多使用的應爲encodeURIComponent，它是將中文、韓文等特殊字元轉換成utf-8格式的url編碼，所以如果給後臺傳遞參數需要使用encodeURIComponent時需要後臺解碼對utf-8支援（form中的編碼方式和當前頁面編碼方式相同）

escape不編碼字元有69個：*，+，-，.，/，@，_，0-9，a-z，A-Z

encodeURI不編碼字元有82個：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z

encodeURIComponent不編碼字元有71個：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z
escape() 方法:
所有空格、標點符號、重音字元,以及任何其他非ASCII字元都編碼改爲"%XX"的形式,xx是16進制數位所代表.
escape和unescape的編碼和解碼功能, escape返回16進制編碼的一種ISO拉丁字元集. unescape的功能將具有特殊值的16進制編碼轉換爲ASCII字串
舉例:
escape('!@#$%^&*(){}[]=:/;?+\'"'):
結果:%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%3B%3F+%27%22

encodeURI() 方法
    Encodeuri方法返回一個編碼後的URI. 因此,如果你將其結果用Decodeuri方法,原始的串會返回. Encodeuri的方法並不對以下字元編碼:":"、"/"、"; "、"? ". 但可以使用 encodeuricomponent 的方法對這些字元進行encode. 
    encodes,一種 Uniform Resource Identifier (URI)(URI)逐一替換某些字元,描述爲UTF-8編碼的特點.
    例如 :
    encodeURI('!@#$%^&*(){}[]=:/;?+\'"'):
    結果:!@#$%25%5E&*()%7B%7D%5B%5D=:/;?+'%22

encodeURIComponent() 方法:
encodeuricomponent 方法返回一個編碼的URI. 因此,如果你將decodeuricomponent,原來的串會返回. 由於所有文字encodesencodeuricomponent方法都會進行編碼,所以要小心,如果存在路徑等串例如: "/FOLDER1/FOLDER2/DEFAULT.HTML". 加密後並不會,如果作爲一個網路服務器的請求將會失效. 使用這種方法Encodeuri當字串超過一個以上URI組成.
    encodes,一種 Uniform Resource Identifier (URI)(URI)逐一替換某些字元,描述爲UTF-8編碼的特點. 
 例子:最簡單的方法就是看它們加密這些字元後生成的代碼.
encodeURIComponent('!@#$%^&*(){}[]=:/;?+\'"'):
結果 !%40%23%24%25%5E%26*()%7B%7D%5B%5D%3D%3A%2F%3B%3F%2B'%22 

什麽時候適合用什麽方法?

escape() 方法不會加密 + 在伺服器端會被解析爲空格以及在表單forms區域中的spaces.基於這樣的縮減方式,你應該盡可能的避免使用這種方法,二選一的話,最好的經常使用 encodeURIComponent().

escape() 不會加密: @*/+

使用encodeURI()  比 escape() 稍專業化,它是針對URIs編碼的 .一個做爲querystring的反面, 屬於URL的一個部分.使用這種方法是當你需要將一個字串轉換爲URIs資源標識以及需要某些字元保持非encode狀態.請記住, 這個' 字元是不會進行編碼的,因爲它本身就包括在URIs裏.

encodeURI()不會加密: !@#$&*()=:/;?+'

最後, encodeURIComponent() 方法用在大多數cases中,當你需要對一個單獨URIs部件進行編碼,這種方法可以加密某些特殊用於的URIs的字元,因此大部分部件可以包含在裏面. 記住, ' 字元本身就包括在URIs裏,所以不會此方法不會對其進行編碼.

encodeURIComponent() 不會加密: !*()'

ZK相關資料

ZK vs. Ajax JSF

ZK圖表

ZK for JSF

ZK DEMO

script倒數計時

來源:藍色小鋪

<script>
var digit = 100;
function cd() {
if(digit <= 0) return;
document.getElementById("count_down").innerHTML = digit;
digit --;
}
window.onload = function() {
setInterval(cd, 1000);
}
</script>
<div id="count_down"></div>

javascript的==與=== (轉)

來源:JavaWorld

=== 是 javascript 1.3新增的 Operator(Strict Equals Operator)，和 == 不同的地方在於，除了值相等之外，型別也要相等。

以下面程式為例 false == 0為 true，因為最後會轉成數字做比較，所以0==0。
而false === 0為 false，因為一個是Boolean，一個是Number，因此不相等。

<html>
<body>
<script type="text/javascript">
alert("false == 0: "+ (false == 0)); //true
alert("false === 0: "+ (false === 0)); //false
alert("undefined == null: "+ (undefined == null)); //true
alert("undefined === null: "+ (undefined === null)); //false

var A = 5;
var B = "5";
alert("Type of A: "+typeof A);
alert("Type of B: "+typeof B);
alert("A == B: "+ (A == B) ); //true
alert("A === B: "+ (A === B) ); //false

alert("A != B: "+ (A != B) ); //false
alert("A !==B: "+ (A !== B) ); //true
</script>
</body>
</html>

結論是需要"精確"比對時，可以改用 ===或 !==

■ Javascript Technique (轉)

來源:WEB2.0■ Javascript Technique

Lightbox & Image Gallery
Ajax-Based
www.huddletogether.com [Note] www.HuddleTogether.com 2.0版當 IE 關掉左側我的最愛時，最右側背景會缺一長條塊黑影
JonDesign's SmoothGallery [Note] smoothgallery.jondesign.net Slideshow
Ajax Photo Gallery [Note] www.agilegallery.com Require XML file output by Picasa (須上傳照片到Picasa網站)
Grey Box [Note] orangoo.com display websites, images and other content
Litebox [Note] www.doknowevil.net
Multifaceted Lightbox [Note] www.gregphoto.net
Slightly ThickerBox [Note] www.jasons-toolbox.com 1.7 版測試時，Opera 有 bug，無法顯示圖片。IE 會閃圖後才出現。
Slimbox [Note] www.digitalia.be ready to launch, no waiting for all images loaded temporary hides flashs & videos no use a 1pix transparent gif image & simple CSS (no CSS hacks) not compatible with the old IE5.5
Suckerfish HoverLightbox Redux [Suckerfish HoverLightbox] [Note] mondaybynoon.com
LightWindow [Note] stickmanlabs.com 可顯示Flash、影片檔、外部網頁
Lytebox [Note] Album & Slideshow
iBox [Note] www.ibegin.com 可看影片檔 大圖會隨卷軸自行移動，因此大圖若超過瀏覽器外，則無法看見被切掉的部份。
Smoothbox [Note] gueschla.com 大圖會隨卷軸自行移動
YUI Based Lightbox [Note] thecodecentral.com
Imago [Note] codeboje.de 支援 xml 設定、Flickr&Smugmug
photoViewer [Note] nicora.net based on YUI library Easily skinned, auto-centered, slide show, XML files, absolute&relative position
carousel [Note] billwscott.com 支援 Vertical Orientation、Slide Show、Module Scrolling、Module Tabset 效果沒有 lightbox 效果。 Demo 部分在出大圖後須按上一頁返回，此時 thumbnail 會跑回第一頁。
multibox Lightbox slideshow [Note] www.phatfusion.net 可開啟swf、movie、mp3等格式
FrogJS Javascript Gallery [Note] www.puidokas.com a different way of showcasing galleries(best used when a page-by-page gallery is needed, as is the case with photo stories)
Galleria [homesite、lightweight gallery] [Note] monc.se
AJAX Image Gallery powered by Slideflow (like Cover Flow) [Note] mediaeventservices.com
JaS gallery [Note] www.robertnyman.com
MooFlow [Note] www.outcut.de 支援 mouse wheel、reflections、UI skinable via CSS
Shadowbox [Note] mjijackson.com 支援 photo resize、thumb gallery、client-side image maps 可開啟 flash、movies、web pages
mooCicle [Note] www.thedeveloperinside.com 類似 slideshow、無縮圖
jqGalViewIII (proof of concept) [Note] benjaminsterling.com
Live Thumbnail [Note] diverged.org 超級陽春(沒有說明文件、下載點，效果差強人意)
[Note]
minishowcase [Note] minishowcase.frwrd.net php/javascript online photo gallery, powered by AJAX 自動製作縮圖
Pyxy-gallery [Note] fennecfoxen.org AJAX image gallery in PHP and JavaScript
zenphoto [Note] www.zenphoto.org require PHP 4.10+ with GD support & MySQL 3.23+ Automatically generated thumbnails Video support for Flash Video 沒有 lightbox 效果
(E)2 Photo Gallery [Note] www.e2interactive.com XML Driven, 須 PHP 配合
photo folder [Note] livepipe.net requires PHP 5+ & GD image library 縮圖有捲軸做移動
[Note]
AJAX Slide Show [Note] www.google.com
Couloir Slideshow [Note] www.couloir.org photo slideshow of Flash-like behavior
TripTracker [Note] slideshow.triptracker.net JavaScript image viewer with an animated slideshow feature
jQuery Cycle Plugin [Note] www.malsup.com slideshow plugin 多種轉景
FlickrShow - Simple Javascript Slideshows [Note] www.flickrshow.com
Slideshow [Note] www.electricprism.com
Ajax SlideShow [Note] slideshow.webtwo.ws XML Based Configuration、Flickr.com compatible
slideViewer [Note] www.gcmingati.net 下方圖片張數索引自動生成，無法使用縮圖
noobSlide - mootools [Note] efectorelativo.net 可用縮圖選擇、多種轉景效果
[Note]
[Note]
CSS-Based
A Photograph Gallery Tutorial [Demo1、Demo2、Demo3、Demo4、Demo5] [Note] www.cssplay.co.uk/menu/gallery.html
CSS Image Gallery [Note] www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
Photo Showcase [Note] mikecherim.com
Hoverbox [Note] sonspring.com
xImgGallery [Note] cross-browser.com
easyAlbum [Note] tjkdesign.com
Highslide JS [Note] vikjavev.no ﹡Only non-commercial free 可顯示 flash、iframe
ImageGal [Note] dasme.org PHP script
Satellite [Note] design.tedforbes.com 結合 PHP & Yahoo Flickr
Dhonishow [Note] lifedraft.de inline gallery
DropProof [Note] www.bigfolio.com PHP tool for simple image proofing Bug: 大圖一定會顯示在最上方，須自行捲動scrollbar
CSS Photo Shuffler [Note] iamacamera.org