HTML5 Samples http://MobileDev.TW
HTML5Samples
Ryan@MobileDev.TW
1
HTML5 Samples http://MobileDev.TW
HTML5 Samples
1.  輕便型位置記錄器
•  使用者端儲存+地理位置偵測+字串切割與合併
2.  Canvas小畫家
•  Canvas繪圖+觸碰事件
3.  拼...
HTML5 Samples http://MobileDev.TW
1.輕便型位置記錄器
•  使用者可以輸入目前位置的名稱,記錄下目前位置
•  將記錄的位置清單列在網頁下方
3
HTML5 Samples http://MobileDev.TW
使用者端資料儲存
4
HTML5 Samples http://MobileDev.TW
A.localStorage
HTML5提供兩種方式進行離線儲存:
localStorage : 資料存放無時間限制
一、存放資料
script type=text/javas...
HTML5 Samples http://MobileDev.TW
B.sessionStorage
sessionStorage : 將資料存在一個session,當使用者關閉瀏覽器時資料即消失
一、存放資料
script type=text...
HTML5 Samples http://MobileDev.TW
1.輕便型位置記錄器
1.  列出使用者曾記錄過的位置
2.  使用者可輸入目前位置名稱
3.  按下送出後,會產生連結至目前地圖位置的超連結
4.  清單也會即時更新,加入最...
HTML5 Samples http://MobileDev.TW
1.輕便型位置記錄器
1.  網頁載入時
•  取出local storage裡頭的資料
•  將資料依換行符號進行切割,然後放入陣列
•  將陣列中的每一個項目以清單方式顯示...
HTML5 Samples http://MobileDev.TW
1.Lab 喝水記錄器
9
HTML5 Samples http://MobileDev.TW
2.Canvas小畫家
•  點選標題可變換顏色
•  按一下畫一點
•  拖曳則畫一條線
•  按下Clear按鈕則清除畫面
10
HTML5 Samples http://MobileDev.TW
電腦與手機互動事件的差異
•  onmousedown
•  電腦:按下滑鼠左鍵時
•  手機:手指觸碰螢幕時
•  onmousemove
•  電腦:移動滑鼠時
•  手機...
HTML5 Samples http://MobileDev.TW
滑鼠事件
•  當滑鼠在頁面上
•  移動
•  點擊
•  顯示絕對座標與相對座標
•  顯示元件名稱
12
HTML5 Samples http://MobileDev.TW
滑鼠事件
•  撰寫一頁面有h1、textarea
•  頁面載入時,設定以下事件
•  onmousedown
•  onmousemove
•  onmouseup
•  ...
HTML5 Samples http://MobileDev.TW
觸碰事件
•  當手指在頁面上
•  移動
•  點擊
•  顯示座標
•  顯示事件名稱
14
HTML5 Samples http://MobileDev.TW
觸碰事件
•  撰寫一頁面有一div
•  頁面載入時,設定以下事件於div上
•  ontouchstart
•  ontouchmove
•  ontouchdown
• ...
HTML5 Samples http://MobileDev.TW
2.Canvas小畫家
•  網頁上方一個div作為標題
•  中間一個canvas、下方一個按鈕
•  網頁一載入,設定
•  canvas基本屬性、畫筆顏色寬度
•  設定...
HTML5 Samples http://MobileDev.TW
2.Lab 調整畫筆粗細
•  加入下拉式選單
•  決定選項後直接設定畫筆粗細
17
HTML5 Samples http://MobileDev.TW
3.拼圖
•  將一張圖片切割成數塊打亂
•  拿走最後一塊拼圖
•  使用者可移動拼圖組回原貌
18
HTML5 Samples http://MobileDev.TW
程式流程
1.  在網頁上顯示原圖片,然後切割打亂
2.  顯示打亂的圖片並且把最後一塊拼圖拿走
3.  當使用者觸控時,判斷上下左右是否為空格
•  若為空格則交換兩張拼圖
...
HTML5 Samples http://MobileDev.TW
編號與座標的對應
20
0
 1
 2
 3
4
 5
 6
 7
8
 9
 10
 11
12
 13
 14
 15
(0,0) (80,0) (160,0) (240,...
HTML5 Samples http://MobileDev.TW
轉換
•  從編號轉換為座標
•  編號為no
•  x=no%4*80
•  y=((no/4)的向下整數)*80
•  從座標轉換為編號
•  座標為(x,y)
•  no...
HTML5 Samples http://MobileDev.TW
轉換二
•  將使用者觸控到的位置轉換成第no塊
•  觸控到的位置為(x,y)
•  no=((x/80)的向下整數)+(((y-20)/80)的向下整數)*4
•  相鄰方...
HTML5 Samples http://MobileDev.TW
5.Lab
•  點到什麼位置
•  點到哪一張牌
•  要做什麼處理?
•  不動
•  移動
•  成功的判斷
23
Upcoming SlideShare
Loading in …5
×

HTML5 Samples

1,843 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,843
On SlideShare
0
From Embeds
0
Number of Embeds
118
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 Samples

  1. 1. HTML5 Samples http://MobileDev.TW HTML5Samples Ryan@MobileDev.TW 1
  2. 2. HTML5 Samples http://MobileDev.TW HTML5 Samples 1.  輕便型位置記錄器 •  使用者端儲存+地理位置偵測+字串切割與合併 2.  Canvas小畫家 •  Canvas繪圖+觸碰事件 3.  拼圖 •  Canvas加入圖片+觸控事件+陣列儲存 2
  3. 3. HTML5 Samples http://MobileDev.TW 1.輕便型位置記錄器 •  使用者可以輸入目前位置的名稱,記錄下目前位置 •  將記錄的位置清單列在網頁下方 3
  4. 4. HTML5 Samples http://MobileDev.TW 使用者端資料儲存 4
  5. 5. HTML5 Samples http://MobileDev.TW A.localStorage HTML5提供兩種方式進行離線儲存: localStorage : 資料存放無時間限制 一、存放資料 script type=text/javascript localStorage.lastname=Smith; document.write(Last name: + localStorage.lastname); /script 二、記錄到訪次數 script type=text/javascript if (localStorage.pagecount) {localStorage.pagecount=Number(localStorage.pagecount) +1;} else {localStorage.pagecount=1;} document.write(Visits: + localStorage.pagecount + time(s).); /script 5
  6. 6. HTML5 Samples http://MobileDev.TW B.sessionStorage sessionStorage : 將資料存在一個session,當使用者關閉瀏覽器時資料即消失 一、存放資料 script type=text/javascript sessionStorage.lastname=Smith; document.write(sessionStorage.lastname); /script 二、計算訪客次數 script type=text/javascript if (sessionStorage.pagecount) {sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;} else {sessionStorage.pagecount=1;} document.write(Visits + sessionStorage.pagecount + time(s) this session.); /script 6
  7. 7. HTML5 Samples http://MobileDev.TW 1.輕便型位置記錄器 1.  列出使用者曾記錄過的位置 2.  使用者可輸入目前位置名稱 3.  按下送出後,會產生連結至目前地圖位置的超連結 4.  清單也會即時更新,加入最新連結 5.  下次開啓時,這些連結都會出現 7
  8. 8. HTML5 Samples http://MobileDev.TW 1.輕便型位置記錄器 1.  網頁載入時 •  取出local storage裡頭的資料 •  將資料依換行符號進行切割,然後放入陣列 •  將陣列中的每一個項目以清單方式顯示於頁面上 2.  使用者輸入完店名並按下送出按鈕時 •  確認使用者是否有輸入店名 •  取得目前的經緯度 •  經緯度連同使用者輸入的店名作成字串 •  將字串放入陣列中 •  將陣列的每個值以換行符號隔開,組合成一個字串 •  將字串存入local storage •  再次呼叫1.所呼叫的函數 8
  9. 9. HTML5 Samples http://MobileDev.TW 1.Lab 喝水記錄器 9
  10. 10. HTML5 Samples http://MobileDev.TW 2.Canvas小畫家 •  點選標題可變換顏色 •  按一下畫一點 •  拖曳則畫一條線 •  按下Clear按鈕則清除畫面 10
  11. 11. HTML5 Samples http://MobileDev.TW 電腦與手機互動事件的差異 •  onmousedown •  電腦:按下滑鼠左鍵時 •  手機:手指觸碰螢幕時 •  onmousemove •  電腦:移動滑鼠時 •  手機:無 •  onmouseup •  電腦:放開滑鼠左鍵時 •  手機:手指離開螢幕時 11 •  手機專屬互動事件 •  ontouchstart •  手指觸碰螢幕時 •  ontouchmove •  觸碰螢幕並移動時 •  ontouchend •  手指離開螢幕時
  12. 12. HTML5 Samples http://MobileDev.TW 滑鼠事件 •  當滑鼠在頁面上 •  移動 •  點擊 •  顯示絕對座標與相對座標 •  顯示元件名稱 12
  13. 13. HTML5 Samples http://MobileDev.TW 滑鼠事件 •  撰寫一頁面有h1、textarea •  頁面載入時,設定以下事件 •  onmousedown •  onmousemove •  onmouseup •  事件觸發函式 •  秀出目前的相對座標與絕對座標 •  (event.offsetX, event.offsetY) (event.clientX, event.clientY) •  秀出目前停留的物件名稱 •  event.target.nodeName 13
  14. 14. HTML5 Samples http://MobileDev.TW 觸碰事件 •  當手指在頁面上 •  移動 •  點擊 •  顯示座標 •  顯示事件名稱 14
  15. 15. HTML5 Samples http://MobileDev.TW 觸碰事件 •  撰寫一頁面有一div •  頁面載入時,設定以下事件於div上 •  ontouchstart •  ontouchmove •  ontouchdown •  事件觸發函式 •  秀出目前觸發的事件名稱 •  event.type •  秀出目前的座標 •  (event.touches[i].pageX, event.touches[i].pageY) 15
  16. 16. HTML5 Samples http://MobileDev.TW 2.Canvas小畫家 •  網頁上方一個div作為標題 •  中間一個canvas、下方一個按鈕 •  網頁一載入,設定 •  canvas基本屬性、畫筆顏色寬度 •  設定canvas的ontouchstart、ontouchmove 、ontouchend事件觸發的函數 •  設定標題的onclick事件(換畫筆顏色) •  全域變數oldX,oldY存放前一個位置,將現在位置與 前一個位置連線 16
  17. 17. HTML5 Samples http://MobileDev.TW 2.Lab 調整畫筆粗細 •  加入下拉式選單 •  決定選項後直接設定畫筆粗細 17
  18. 18. HTML5 Samples http://MobileDev.TW 3.拼圖 •  將一張圖片切割成數塊打亂 •  拿走最後一塊拼圖 •  使用者可移動拼圖組回原貌 18
  19. 19. HTML5 Samples http://MobileDev.TW 程式流程 1.  在網頁上顯示原圖片,然後切割打亂 2.  顯示打亂的圖片並且把最後一塊拼圖拿走 3.  當使用者觸控時,判斷上下左右是否為空格 •  若為空格則交換兩張拼圖 19
  20. 20. HTML5 Samples http://MobileDev.TW 編號與座標的對應 20 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)
  21. 21. HTML5 Samples http://MobileDev.TW 轉換 •  從編號轉換為座標 •  編號為no •  x=no%4*80 •  y=((no/4)的向下整數)*80 •  從座標轉換為編號 •  座標為(x,y) •  no=x/80+y/80*4 21
  22. 22. 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 22
  23. 23. HTML5 Samples http://MobileDev.TW 5.Lab •  點到什麼位置 •  點到哪一張牌 •  要做什麼處理? •  不動 •  移動 •  成功的判斷 23

×