HTML5 一些有用的 APIs

2021-09-08 12:30:23 字數 3123 閱讀 7213

使用上面函式的方法是反覆呼叫即可。

1

2

3

4

5

// 使用 settimeout 模擬 requestanimationframe

// 1秒 內重新整理 60次

function(callback );

使用 requestanimationframe 的目的是為了讓各種網頁動畫效果(dom動畫、canvas動畫、svg動畫、webgl動畫)能夠有乙個統一的重新整理機制,從而節省系統資源,提高系統效能,改善視覺效果。

requestanimationframe 的優勢,在於充分利用顯示器的重新整理機制,比較節省系統資源。顯示器有固定的重新整理頻率(60hz 或 75hz),也就是說,每秒最多只能重繪 60次 或 75次,requestanimationframe 的基本思想就是與這個重新整理頻率保持同步,利用這個重新整理頻率進行頁面重繪。此外,使用這個 api,一旦頁面不處於瀏覽器的當前標籤,就會自動停止重新整理。這就節省了 cpu、gpu 和電力。

不過有一點需要注意,requestanimationframe 是在主線程上完成。這意味著,如果主線程非常繁忙,requestanimationframe 的動畫效果會大打折扣。

fullscreen api living standard — last updated 24 february 2017

使用以下方法需要帶上瀏覽器字首。

12

3

4

5

6

7

8

9

10

11

12

// 相容各個瀏覽器

function launchfullscreen(element) else if(element.mozrequestfullscreen) else if(element.msrequestfullscreen) else if(element.webkitrequestfullscreen)

}

12

3

4

5

6

7

8

9

10

11

12

// 相容各個瀏覽器

function exitfullscreen() else if (document.m***itfullscreen) else if (document.mozcancelfullscreen) else if (document.webkitexitfullscreen)

}

12

// 相容各個瀏覽器

var fullscreenelement = document.fullscreenelement || document.mozfullscreenelement || document.webkitfullscreenelement;

12

// 相容各個瀏覽器

var fullscreenenabled = document.fullscreenenabled || document.mozfullscreenenabled || document.webkitfullscreenenabled || document.msfullscreenenabled;

pagevisibility api 用於判斷頁面是否處於瀏覽器的當前視窗,即是否可見

page visibility level 2 w3c editor』s draft 17 november 2016

1

2

3

4

// 小測試

document.addeventlistener("visibilitychange", function() );

geolocation 介面是乙個用來獲取裝置地理位置的可程式設計的物件,它可以讓web內容訪問到裝置的地理位置,這將允許web應用基於使用者的地理位置提供定製的資訊。

這個 api 在本機上試驗時,暫時還沒有一次成功獲得到地理位置,以後成功補。

notification 物件使用來為使用者設定和顯示桌面通知。

事件notification.permission:靜態唯讀屬性,返回乙個狀態字串(granted、denied、default),可以用來判斷當前頁面是否允許顯示通知

notification.requestpermission():靜態方法,返回乙個 promise 物件,用於向使用者申請當前頁面顯示通知的許可權。這個方法只能被使用者行為呼叫(比如:onclick 事件),並且不能被其他的方式呼叫

close():例項方法,關閉通知

12

3

4

5

6

7

8

9

10

11

12

13

14

// 小例子

document.body.onclick = function() );

} else

});

};

html5 web performance timing apis

一些有用的HTML5 pattern

一些有用的html5 pattern 最近在做手機頁面時,遇到數字輸入的鍵盤的問題,之前的做法只是一刀切的使用type tel 不過一直覺得九宮格的 號碼鍵盤上的英文本母太礙事了。於是想要嘗試其它的實現方案,最終的結論卻令人沮喪。不過也趁機詳細了解了下pattern這個屬性。type tel 和ty...

一些有用的HTML5 pattern

最近在做手機頁面時,遇到數字輸入的鍵盤的問題,之前的做法只是一刀切的使用type tel 不過一直覺得九宮格的 號碼鍵盤上的英文本母太礙事了。於是想要嘗試其它的實現方案,最終的結論卻令人沮喪。不過也趁機詳細了解了下pattern這個屬性。type tel 和type number 的區別 這裡還是先...

關於HTML5的一些筆記

buckminster fuller.html 正確寫法buckminsterfuller.html 錯誤寫法 檔名全部使用小寫字母,用 短橫線 分隔單詞,用 html 作為副檔名。混合使用大小寫字母會增加訪問者輸入正確位址以及找到頁面的難度。不推薦使用下劃線 資料夾的名稱也應全部用小寫字母。關鍵是...