Contenu connexe
Similaire à HTML5 Samples
Similaire à HTML5 Samples (20)
HTML5 Samples
- 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. 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
- 8. HTML5 Samples http://MobileDev.TW
1.輕便型位置記錄器
1. 網頁載入時
• 取出local storage裡頭的資料
• 將資料依換行符號進行切割,然後放入陣列
• 將陣列中的每一個項目以清單方式顯示於頁面上
2. 使用者輸入完店名並按下送出按鈕時
• 確認使用者是否有輸入店名
• 取得目前的經緯度
• 經緯度連同使用者輸入的店名作成字串
• 將字串放入陣列中
• 將陣列的每個值以換行符號隔開,組合成一個字串
• 將字串存入local storage
• 再次呼叫1.所呼叫的函數
8
- 11. HTML5 Samples http://MobileDev.TW
電腦與手機互動事件的差異
• onmousedown
• 電腦:按下滑鼠左鍵時
• 手機:手指觸碰螢幕時
• onmousemove
• 電腦:移動滑鼠時
• 手機:無
• onmouseup
• 電腦:放開滑鼠左鍵時
• 手機:手指離開螢幕時
11
• 手機專屬互動事件
• ontouchstart
• 手指觸碰螢幕時
• ontouchmove
• 觸碰螢幕並移動時
• ontouchend
• 手指離開螢幕時
- 13. HTML5 Samples http://MobileDev.TW
滑鼠事件
• 撰寫一頁面有h1、textarea
• 頁面載入時,設定以下事件
• onmousedown
• onmousemove
• onmouseup
• 事件觸發函式
• 秀出目前的相對座標與絕對座標
• (event.offsetX, event.offsetY) (event.clientX, event.clientY)
• 秀出目前停留的物件名稱
• event.target.nodeName
13
- 15. HTML5 Samples http://MobileDev.TW
觸碰事件
• 撰寫一頁面有一div
• 頁面載入時,設定以下事件於div上
• ontouchstart
• ontouchmove
• ontouchdown
• 事件觸發函式
• 秀出目前觸發的事件名稱
• event.type
• 秀出目前的座標
• (event.touches[i].pageX, event.touches[i].pageY)
15
- 16. HTML5 Samples http://MobileDev.TW
2.Canvas小畫家
• 網頁上方一個div作為標題
• 中間一個canvas、下方一個按鈕
• 網頁一載入,設定
• canvas基本屬性、畫筆顏色寬度
• 設定canvas的ontouchstart、ontouchmove
、ontouchend事件觸發的函數
• 設定標題的onclick事件(換畫筆顏色)
• 全域變數oldX,oldY存放前一個位置,將現在位置與
前一個位置連線
16
- 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)
- 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