網頁金手指 @ 男丁格爾's 脫殼玩 :: Xuite日誌
  • 同學們~上課囉!!
  • 上課去~~
  • 工商服務
  • 友站連結

  • 詹姆士的部落格
  • Re:Image2PDF 1.1,by(男丁格爾)於2009-07-03
    Re:Image2PDF 1.1,by(zero)於2009-07-03
    Re:依連結的檔案類型顯示圖示,by(男丁格爾)於2009-07-02
    Re:依連結的檔案類型顯示圖示,by(ykl)於2009-07-02
    Re:Get BDG Link Beta 3,by(111)於2009-07-02
    Re:頁籤-動態改變CSS樣式,by(男丁格爾)於2009-07-02
    Re:頁籤-動態改變CSS樣式,by(Ennis)於2009-07-01
    Re:頁籤-動態改變CSS樣式,by(男丁格爾)於2009-07-01
    Re:頁籤-動態改變CSS樣式,by(Ennis)於2009-07-01
    Re:FDZone查詢器 1.3 版,by(Enterprise)於2009-06-29
    Re:網頁右上掀角翻頁廣告,by(uramn)於2009-06-25
    Re:最終幻想掛機程式 2009 R1(未提供),by(Sperson)於2009-06-25
    Re:HTML Viewer 1.0,by(梅干扣肉)於2009-06-19
    Re:用查詢器來解干擾碼,by(小欣)於2009-06-18
    Re:用查詢器來解干擾碼,by(電腦白吃)於2009-06-18
    Re:FDZone查詢器 1.3 版,by(課課)於2009-06-16
    Re:Google Chrome 3.0.187.0 Crash?,by(男丁格爾)於2009-06-15
  • 統計資料
  • ###HIDEME###
  • 2005-11-14 13:46 網頁金手指
    平均分數:0 顆星    投票人數:0
    我要評分:
    標籤 : 

    有網友問說能不能做出那種要按某些特定鍵後轉到某網頁去?這感覺有點像是金手指一樣,輸入正確了就有些秘密關卡出現。雖然不建議用JavaScript來做這種驗證(因為不安全),不過應該也沒也什麼人閒到去看原始碼吧!

    要做這種功能其實很簡單低,讓我們先來看一下Body的部份吧~:

    Body中多了一個onKeyPress的Event,當在網頁中按下任一按鍵時,就會觸發rec()函式;也放了一個TextArea是為了教學顯示資訊看的,到時候若要把語法放到網頁中的話,可以不用這個。

    接著才是重點,JavaScript:

    JavaScript可以分成三個部份來看。

    第一是設定的部份:用變數passwd來記錄密碼myHref則是用來儲存欲轉換的網頁、key_array陣列是用來存放所輸入的鍵。

    第二是記錄的部份:rec函式是用來把所按下的按鈕記錄在key_array陣列裡面,並判斷當key_array陣列長度若跟passwd相同時,便呼叫另一個驗證的函式。如何取得使用者按下什麼按鈕呢?答案就是event.keyCode。不過所得到的會是數字喔,像A就是65、B就是66..但a是97喔。在範例中的TextArea就是要讓各位看按下鈕是什麼數字用的。

    話說IE系列的可以用event.keyCode來取得所按下鍵的Unicode值;雖然在Mozilla中也可以用event.keyCode,但有時得到的值並不是正確的,所以要取得正確的Unicode值的話就要用event.which唷。

    第三是驗證的部份:用check函式一一比對passwd跟key_array陣列中的字是否相同,若相等就轉頁到變數myHref所設定的網頁去;若有一個字不相等,就清空key_array陣列中的值並跳離驗證。其中我用了變數isTrue來儲存驗證的結果是否相同。

    每一行Code都有寫註解啦,所以應該都還看的懂吧!

    各位可以試著執行一下範例,並看TextArea中的訊息。

    passwd設為abcd,A是97..所以依序是98、99、100,若驗證合格就顯示true。

    IE系列是用event.keyCode來取得所按下的鍵的Unicode值;而Mozilla系列則是用event.which才能取得正確的Unicode值

    範例瀏覽:

     http://abgne.myweb.hinet.net/0012/0012_1.html

     http://abgne.myweb.hinet.net/0012/0012_2.html

    男丁格爾 / Xuite日誌 / 回應(3) / 引用(0) / 好文轉寄
  • 回應