html5之DeviceOrientation 手机重力与方向感应
生活随笔
收集整理的這篇文章主要介紹了
html5之DeviceOrientation 手机重力与方向感应
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML5有一個重要特性：DeviceOrientation，它將底層的方向和運動傳感器進行了高級封裝，它使我們能夠很容易的實現重力感應、指南針等有趣的功能。
DeviceOrientation包括兩個事件：
1、deviceOrientation：封裝了方向傳感器數據的事件，可以獲取手機靜止狀態下的方向數據，例如手機所處角度、方位、朝向等。
DeviceOrientation包括兩個事件：
1、deviceOrientation：封裝了方向傳感器數據的事件，可以獲取手機靜止狀態下的方向數據，例如手機所處角度、方位、朝向等。
2、deviceMotion：封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。
實例：
<html><head><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>搖一搖功能</title><script type="text/javascript">window.οnlοad=function(){init();}var SHAKE_THRESHOLD=3000;//定義一個搖動的閾值var last_update=0;//定義一個變量記錄上一次搖動的時間var x=y=z=last_x=last_y=last_z=0;//定義x、y、z記錄三個軸的數據以及上一次觸發的時間function init(){//判斷移動瀏覽器是否支持運動傳感器事件if(window.DeviceMotionEvent){//添加一個事件監聽器window.addEventListener('devicemotion',deviceMotionHandler,false);}else{alert('not support mobile event');}}//運動傳感器處理function deviceMotionHandler(eventData){//獲取含重力加速var acceleration=eventData.accelerationIncludingGravity;var curTime=new Date().getTime();//獲取當前時間戳var diffTime=curTime-last_update;if(diffTime>100){last_update=curTime;//記錄上一次搖動的時間x=acceleration.x;//獲取加速度X方向y=acceleration.y;//獲取加速度Y方向z=acceleration.z;//獲取加速度垂直方向var speed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000;//計算閾值if(speed>SHAKE_THRESHOLD){alert("搖動了，關閉播放自動播放");var arr = ['1.mp3','2.mp3','3.mp3','4.mp3'];? <span style="white-space:pre"> </span>var num = Math.floor(Math.random()*4); <span style="white-space:pre"> </span>var media=document.getElementById("musicBox");//獲取音頻控件media.setAttribute("src",arr[num]);media.load();//加載音頻media.play();//播放音頻}//記錄上一次加速度last_x=x;last_y=y;last_z=z;}}</script></head><body><p>搖一搖播放音樂吧</p><audio id="musicBox" controls="true" src="1.mp3"/></body> </html>
總結
以上是生活随笔為你收集整理的html5之DeviceOrientation 手机重力与方向感应的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 究竟什么是CRM(客户关系管理系统)呢？
- 下一篇： bat批处理开发-wifi联网系列（4）