摘要:對象包括和以及失敗回調函數接收對象對象有和兩個屬性可選對象接收一個對象對象內容有以及該方法接收的參數與上面的一致。
早期的動畫循環
在js中創建動畫的典型方式就是用setInterval方法控制所有動畫:
(function() { function animations() { //animations... } setInterval(animations, 100); })()
最平滑動畫的最佳循環間隔是100ms/60,約為17ms;大多數電腦顯示器的刷新頻率是60Hz。
但是如果UI線程繁忙,比如忙于處理用戶操作,那么即使把代碼加入到列隊也不會立即執行。
循環間隔的問題CSS的動畫優勢在于瀏覽器知道動畫什么時候開始,因此會計算出正確的循環間隔,在恰當的時候刷新UI,而對于JavaScript動畫,瀏覽器無從知曉什么時候開始。
目前,W3C已經著手起草requestAnimationFrame()API。
Page Visibility API該API包括以下三個部分:
document.hidden:是否隱藏
document.visibilityState:4個可能的狀態值
后臺標簽或最小化
前臺標簽
實際頁面隱藏,但用戶看到頁面預覽
屏幕外執行預渲染
visibilitychange事件
如:
document.addEventListener("visibilitychange", function () { console.log(document.hidden); });Geolocation API
navigator.geolocation這個對象包括三個方法:
getCurrentPosition:接收3個參數(成功回調函數、可選的失敗回調函數、可選的選項對象)
成功回調函數會接收到一個Position對象參數,該對象有兩個屬性:coords和timestamp。
coords:對象包括latitude和longitude以及accuracy
失敗回調函數接收error對象
error對象有code和message兩個屬性
可選對象接收一個對象:對象內容有enableHighAccuracy、timeout以及maximumAge
watchPosition:該方法接收的參數與上面的一致。配合clearWatch方法使用,類似setTimeout和clearTimeout
clearWatch
如:
navigator.geolocation.getCurrentPosition(function(position) { do_something(position.coords.latitude, position.coords.longitude); //第一個參數為成功的回調函數 }); navigator.geolocation.getCurrentPosition(function(position) { console.log(position.coords.latitude); console.log(position.coords.timestamp); }, function(err) { //第二個參數為失敗的回調函數 console.log("Error code: " + err.code); console.log("Error message: " + err.message); }); navigator.geolocation.getCurrentPosition(function(position) { console.log(position.coords.latitude); console.log(position.coords.timestamp); }, function(err) { console.log("Error code: " + err.code); console.log("Error message: " + err.message); }, { //第三個參數接收對象 enableHighAccuracy: true, timeout: 1000, maximumAge: 30000 });File API
HTML5 DOM中添加了元素files集合,通過文件輸入字段選擇一個或多個文件,files集合中將包括一組File對象,每個File對象對應著一個文件,每個File對象有下面的只讀屬性:
name:本地文件系統中的文件名
size:文件的字節大小
type:字符串,文件的MIME類型
lastModifiedDate:字符串,上次文件被修改的事件
如:
var files = document.getElementById("files"); files.onchange = function () { var list = event.target.files; //FileList對象 // console.log(list); //name: lastModified: lastModifiedDate: webkitRelativePath: for (var i = 0, len = list.length; i < len; i++) { console.log("name: " + list[i].name + "; type: " + list[i].type + "; size: " + list[i].size + "bytes"); //name: opening.png; type: image/png; size: 324991bytes }; };FileReader
瀏覽器都支持前兩個方法:
readAsText;
readAsDataURL
readAsBinaryString
readAsArrayBuffer
如下例子:
var files = document.getElementById("files"); files.onchange = function() { var files = event.target.files, info = "", output = document.getElementById("output"), type = "default", reader = new FileReader(); if (/image/.test(files[0].type)) { reader.readAsDataURL(files[0]); type = "image"; } else { reader.readAsText(files[0]); type = "text"; } reader.onerror = function () { output.innerHTML = "Could not read, error: " + reader.error.code; }; reader.onprogress = function () { if (event.lengthComputable) { output.innerHTML = event.loaded + "/" + event.total; } }; reader.onload = function () { var html = ""; switch (type) { case "image": html = ""; break; case "text": html = reader.result; break; } output.innerHTML = html; }; };
如果想中斷則需要調用abort方法。
讀取部分內容Blob的實例,slice()方法
blob.slice(startByte, length)
對象URL引用保存在File或Blob中數據的URL:
window.URL.createObjectURL()方法
要釋放內存則把對象URL傳給:
window.URL.revokeObjectURL()方法
拖放文件var droptarget = document.getElementById("drop"); droptarget.addEventListener("dragenter",function () { event.preventDefault(); }); droptarget.addEventListener("dragover",function () { event.preventDefault(); }); droptarget.addEventListener("drop",function () { event.preventDefault(); var file = event.dataTransfer.files[0]; console.log(file.name) });
在drop事件中,可以通過event.dataTransfer.files讀取文件信息。
XHR方法上傳文件略
data = new FormData(); ... data.append("file" + i, files[i]); ... xhr.send(data);Web 計時
Web Timing API
window.performance對象
PerformanceNavigation.redirectCount
type
performance.timing屬性
navigationStart
unloadEventStart
unloadEventEnd
redirectStart
redirectEnd
fetchStart
domainLookupStart
domainLookupEnd
connectStart
connectEnd
secureConnectionStart
requestStart
responseStart
responseEnd
domLoading
domInteractive
domContentLoadedEventStart
domContentLoadedEventEnd
domComplete
loadEventStart
loadEventEnd
toJSON
Web Workers略
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78984.html
摘要:實際上,的核心就是通過選擇符查詢文檔取得元素的引用。方法該方法接收一個選擇符,返回的是所有匹配的元素而不僅僅是一個元素。而其底層實現則類似于一組元素的快照,而非不斷對文檔進行搜索的動態查詢。 選擇符API Selector API Level1 的核心就是兩個方法:querySelector()和querySelectorAll()。實際上,jQuery的核心就是通過CSS選擇符查詢D...
摘要:另外,以及這兩個方法,在測試了一下,并無反應。不知是否兼容問題。下面是獲得焦點的時候,自動以每毫秒的速度往下滾屏 文檔模式 頁面的文檔模式是由IE8引入的,文檔模式決定了可以使用的CSS級別、JS中的API以及如何對待文檔類型(doctype);在IE9,提供了4中文檔模式: IE5:混雜模式; IE7:IE7標準模式渲染頁面; IE8:IE8標準模式渲染頁面,可以使用Selecto...
摘要:由兩部分組成回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數,回調函數的名字一般是在請求中指定的。下面是以個的例子回調函數的名字就是是通過動態的元素來使用的,使用時可以為屬性指定一個跨域。是為與其他傳遞消息的很相似。 圖像Ping技術 根據一個網頁可以從任何網頁中加載圖像而不用擔心使用跨域的原理, 我們可以動態的創建圖像, 使用他們的onload和onerror事件處理程序...
摘要:上面代碼中,通過為組件指定事件的回調函數,確保了只有等到真實發生事件之后,才會讀取屬性。七表單代碼九要點文本輸入框的值,不能用讀取,而要定義一個事件的回調函數,通過讀取用戶輸入的值。 一.JSX簡介 JSX即JavaScript XML,一種在React組件內部構建標簽的類XML語法。在不使用JSX的情況下,React程序中創建DOM是這樣的: //v0.11 React.DOM.h1...
摘要:事件除了大量屬性之外,這兩個媒體元素還可以觸發很多事件。下表列出了媒體元素相關的事件。這兩個媒體元素都有一個方法,該方法接收一種格式編解碼器字符串,返回或空字符串。 audio和video元素的用法如下: 不支持音頻 不支持視頻 因為并非所有瀏覽器都支持所有媒體格式,所以可以指定多個不同的媒體來源。為此,不用在標簽中指定src屬性,而是要像下面這樣使用一或多個元素。 ...
閱讀 940·2021-09-27 13:36
閱讀 888·2021-09-08 09:35
閱讀 1064·2021-08-12 13:25
閱讀 1437·2019-08-29 16:52
閱讀 2907·2019-08-29 15:12
閱讀 2726·2019-08-29 14:17
閱讀 2606·2019-08-26 13:57
閱讀 1012·2019-08-26 13:51