html5之DeviceOrientation 手机重力与方向感应
生活随笔
收集整理的這篇文章主要介紹了
html5之DeviceOrientation 手机重力与方向感应
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
HTML5有一個重要特性：DeviceOrientation，它將底層的方向和運(yùn)動傳感器進(jìn)行了高級封裝，它使我們能夠很容易的實(shí)現(xiàn)重力感應(yīng)、指南針等有趣的功能。
DeviceOrientation包括兩個事件：
1、deviceOrientation：封裝了方向傳感器數(shù)據(jù)的事件，可以獲取手機(jī)靜止?fàn)顟B(tài)下的方向數(shù)據(jù)，例如手機(jī)所處角度、方位、朝向等。
DeviceOrientation包括兩個事件：
1、deviceOrientation：封裝了方向傳感器數(shù)據(jù)的事件，可以獲取手機(jī)靜止?fàn)顟B(tài)下的方向數(shù)據(jù)，例如手機(jī)所處角度、方位、朝向等。
2、deviceMotion：封裝了運(yùn)動傳感器數(shù)據(jù)的事件，可以獲取手機(jī)運(yùn)動狀態(tài)下的運(yùn)動加速度等數(shù)據(jù)。
實(shí)例：
<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;//定義一個變量記錄上一次搖動的時(shí)間var x=y=z=last_x=last_y=last_z=0;//定義x、y、z記錄三個軸的數(shù)據(jù)以及上一次觸發(fā)的時(shí)間function init(){//判斷移動瀏覽器是否支持運(yùn)動傳感器事件if(window.DeviceMotionEvent){//添加一個事件監(jiān)聽器window.addEventListener('devicemotion',deviceMotionHandler,false);}else{alert('not support mobile event');}}//運(yùn)動傳感器處理function deviceMotionHandler(eventData){//獲取含重力加速var acceleration=eventData.accelerationIncludingGravity;var curTime=new Date().getTime();//獲取當(dāng)前時(shí)間戳var diffTime=curTime-last_update;if(diffTime>100){last_update=curTime;//記錄上一次搖動的時(shí)間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;//計(jì)算閾值if(speed>SHAKE_THRESHOLD){alert("搖動了，關(guān)閉播放自動播放");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>
總結(jié)
以上是生活随笔為你收集整理的html5之DeviceOrientation 手机重力与方向感应的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 究竟什么是CRM(客户关系管理系统)呢？
- 下一篇： bat批处理开发-wifi联网系列（4）