var box = document.querySelector('.box'); var timer; window.addEventListener('deviceorientation', function(e) { var x = parseInt(e.gamma); var y = parseInt(e.beta); var r = parseInt(e.alpha); box.style.webkitTransform = 'translate3d(' + x*window.innerWidth/180 + 'px, '+ y*window.innerHeight/180 +'px, 0) rotate('+ r +'deg)' });

3、启动原生应用

背景：

在全民飞机大战移动版的开发中，需要满足一个需求，当用户点击下载按钮时，如果用户已经安装了该APP，则直接启动，否则跳到下载页。

问题：

在网页中如何启动原生应用？

解决：

首先通过URL Scheme尝试打开本地APP，如果打开成功，网页中setTimeout将会挂起，重新回到页面时超时不再执行，否则，如果打开失败，则尝试下载或进入下载页面。

代码：

(function(){ var iosURL = 'itms-apps://itunes.apple.com/cn/app/quan-min-fei-ji-da-zhan/id731871690?l=en&mt=8'; var androidURL = 'http://dlied5.qq.com/wefly/release/android/1.0.5/wefly_1.0.5.6_android_8CF5F95E.apk'; var iosScheme = 'tencentlaunch100539858:'; var androidScheme = 'webwx47a71dd8a1875943:'; var homePage = '/web201404/'; if(/iphone|ipod|ipad/i.test(navigator.userAgent)) { window.location = iosScheme; var startDate = new Date(); setTimeout(function(){ if(new Date() - startDate > 1000) return; window.location= iosURL; window.setTimeout(function(){ window.location= homePage; }, 100) } , 800); } else if(/android/i.test(navigator.userAgent)) { window.location = androidScheme; var startDate = new Date(); setTimeout(function(){ if(new Date() - startDate > 1000) return; window.location= androidURL; window.setTimeout(function(){ window.location= homePage; }, 1000) } , 800); } else { alert('非常抱歉，本游戏暂时只提供android和ios版。'); window.location= homePage; } })();

4、地理定位 HTML 5 Geolocatioin

地理定位是HTML 5的重要热性之一，它提供了用户的确切位置（经纬度）。借助这个特性我们能够开发基于地理位置的页面。

HTML 5 Geolocatioin API 使用起来很简单，我们通过下面的方式调用。