使用上面函数的方法是 反复调用 即可。
1
2
3
4
5
|
// 使用 setTimeout 模拟 requestAnimationFrame
// 1秒 内刷新 60次
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
|
使用 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
使用以下方法需要带上浏览器前缀。
1
2
3
4
5
6
7
8
9
10
11
12
|
// 兼容各个浏览器
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){
element.msRequestFullscreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 兼容各个浏览器
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
|
1
2
|
// 兼容各个浏览器
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
|
1
2
|
// 兼容各个浏览器
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled;
|
PageVisibility API 用于判断页面是否处于浏览器的当前窗口,即是否可见
1
2
3
4
|
// 小测试
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
});
|
Geolocation 接口是一个用来获取设备地理位置的可编程的对象,它可以让Web内容访问到设备的地理位置,这将允许Web应用基于用户的地理位置提供定制的信息。
navigator.geolocation: 只读属性,返回一个 Geolocation 对象,通过这个对象可以访问到设备的位置信息
Geolocation.getCurrentPosition(success, error, options): 获取设备当前位置
这个 API 在本机上试验时,暂时还没有一次成功获得到地理位置,以后成功补。
Notification 对象使用来为用户设置和显示桌面通知。
new Notification(title, options)
事件
Notification.permission: 静态只读属性,返回一个状态字符串(granted、denied、default),可以用来判断当前页面是否允许显示通知
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 小例子
document.body.onclick = function() {
// 请求允许通知
Notification.requestPermission().then(function(result) {
if (result == ‘granted‘) {
let msg = new Notification(‘Notification Title‘, {
body: ‘I am notification body~‘
});
} else {
alert(‘Can\‘t get permission~‘);
}
});
};
|
原文:http://www.cnblogs.com/Unknw/p/6539974.html