Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Samples

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

HTML5 Samples

Avatar for Ryan Chung

Ryan Chung

May 26, 2014
Tweet

More Decks by Ryan Chung

Other Decks in Technology

Transcript

  1. HTML5 Samples http://MobileDev.TW 1.輕便型位置記錄器 1.  網頁載入時 •  取出local storage裡頭的資料 • 

    將資料依換行符號進行切割,然後放入陣列 •  將陣列中的每一個項目以清單方式顯示於頁面上 2.  使用者輸入完店名並按下送出按鈕時 •  確認使用者是否有輸入店名 •  取得目前的經緯度 •  經緯度連同使用者輸入的店名作成字串 •  將字串放入陣列中 •  將陣列的每個值以換行符號隔開,組合成一個字串 •  將字串存入local storage •  再次呼叫1.所呼叫的函數 5
  2. HTML5 Samples http://MobileDev.TW 電腦與手機互動事件的差異 •  onmousedown •  電腦:按下滑鼠左鍵時 •  手機:手指觸碰螢幕時

    •  onmousemove •  電腦:移動滑鼠時 •  手機:無 •  onmouseup •  電腦:放開滑鼠左鍵時 •  手機:手指離開螢幕時 7 •  手機專屬互動事件 •  ontouchstart •  手指觸碰螢幕時 •  ontouchmove •  觸碰螢幕並移動時 •  ontouchend •  手指離開螢幕時
  3. HTML5 Samples http://MobileDev.TW 2.滑鼠事件 •  當滑鼠在頁面上 •  移動 •  點擊

    •  顯示絕對座標與相對座標 •  顯示元件名稱 8
  4. HTML5 Samples http://MobileDev.TW 2.滑鼠事件 •  撰寫一頁面有h1、textarea •  頁面載入時,設定以下事件 •  onmousedown

    •  onmousemove •  onmouseup •  事件觸發函式 •  秀出目前的相對座標與絕對座標 •  (event.offsetX, event.offsetY) (event.clientX, event.clientY) •  秀出目前停留的物件名稱 •  event.target.nodeName 9
  5. HTML5 Samples http://MobileDev.TW 3.觸碰事件 •  撰寫一頁面有一div •  頁面載入時,設定以下事件於div上 •  ontouchstart

    •  ontouchmove •  ontouchdown •  事件觸發函式 •  秀出目前觸發的事件名稱 •  event.type •  秀出目前的座標 •  (event.touches[i].pageX, event.touches[i].pageY) 11
  6. HTML5 Samples http://MobileDev.TW 4.Canvas小畫家 •  網頁上方一個div作為標題 •  中間一個canvas、下方一個按鈕 •  網頁一載入,設定

    •  canvas基本屬性、畫筆顏色寬度 •  設定canvas的ontouchstart、ontouchmove 、ontouchend事件觸發的函數 •  設定標題的onclick事件(換畫筆顏色) •  全域變數oldX,oldY存放前一個位置,將現在位置與 前一個位置連線 13
  7. HTML5 Samples http://MobileDev.TW 編號與座標的對應 17 0 1 2 3 4

    5 6 7 8 9 10 11 12 13 14 15 (0,0) (80,0) (160,0) (240,0) (0,80) (0,160) (0,240) (80,80) (80,160) (80,240) (160,80) (160,160) (160,240) (240,80) (240,160) (240,240)
  8. HTML5 Samples http://MobileDev.TW 轉換 •  從編號轉換為座標 •  編號為no •  x=no%4*80

    •  y=((no/4)的向下整數)*80 •  從座標轉換為編號 •  座標為(x,y) •  no=x/80+y/80*4 18
  9. HTML5 Samples http://MobileDev.TW 轉換二 •  將使用者觸控到的位置轉換成第no塊 •  觸控到的位置為(x,y) •  no=((x/80)的向下整數)+(((y-20)/80)的向下整數)*4

    •  相鄰方塊的編號 •  上方 no_up= ((x/80)的向下整數)+(((y-20)/80)的向下整數-1)*4 •  下方 no_down=((x/80)的向下整數)+(((y-20)/80)的向下整數+1)*4 •  左方 no_left=((x/80)的向下整數-1)+(((y-20)/80)的向下整數)*4 •  右方 no_right=((x/80)的向下整數+1)+(((y-20)/80)的向下整數)*4 19