HTML5实现手机摇一摇的功能

2024-11-19 技术教程

利用html5实现类似微信的手机摇一摇功能，并播放音乐。

1、 deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。

2、 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

js如下：

<scirpt>varSHAKE_THRESHOLD=3000;varlast_update=0;varx=y=z=last_x=last_y=last_z=0;functioninit(){if(window.DeviceMotionEvent){window.addEventListener('devicemotion',deviceMotionHandler,false);}else{alert('notsupportmobileevent');}}functiondeviceMotionHandler(eventData){varacceleration=eventData.accelerationIncludingGravity;varcurTime=newDate().getTime();if((curTime-last_update)>100){vardiffTime=curTime-last_update;last_update=curTime;x=acceleration.x;y=acceleration.y;z=acceleration.z;varspeed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000;if(speed>SHAKE_THRESHOLD){//一检测到摇动了，就5秒后跳转（此期间播放摇一摇的声音）alert("摇动了");media.setAttribute("src","http://dx.sc.chinaz.com/files/download/sound1/201410/5018.wav");media.load();media.play();setTimeout(function(){location.href='http://www.baidu.com';},5000);}}last_x=x;last_y=y;last_z=z;}}</script>

html5页面如下：

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>HTML5实现手机摇一摇的功能</title><metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/><metaname="Keywords"content=""/><metaname="Description"content=""/><metaname="viewport"content="initial-scale=1.0,user-scalable=no"/><metacontent="application/xhtml+xml;charset=UTF-8"http-equiv="Content-Type"><metacontent="no-cache,must-revalidate"http-equiv="Cache-Control"><metacontent="no-cache"http-equiv="pragma"><metacontent="0"http-equiv="expires"><metacontent="telephone=no,address=no"name="format-detection"><metacontent="width=device-width,initial-scale=1.0"name="viewport"><metaname="apple-mobile-web-app-capable"content="yes"/><metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"/><metacontent="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport"><linkrel="shortcuticon"href="favicon.ico"/><linkrel="stylesheet"type="text/css"href="css/style.css"media="all"/><scriptsrc="js/jquery-1.8.2.min.js"type="text/javascript"></script></head><bodyonLoad="init()"><imgsrc="p_w_picpaths/bg.jpg"width="99%"></body></html>

在手机上试试....

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>摇一摇功能</title><scripttype="text/javascript">//Javascript</script></head><bodyonLoad="init()"><p>用力摇一摇你手机</p><audiosrc="1.mp3"controls="controls"loopid="audioBtn"></audio></body></html><script>varSHAKE_THRESHOLD=3000;varlast_update=0;varx=y=z=last_x=last_y=last_z=0;functioninit(){if(window.DeviceMotionEvent){window.addEventListener('devicemotion',deviceMotionHandler,false);}else{alert('notsupportmobileevent');}}functiondeviceMotionHandler(eventData){varacceleration=eventData.accelerationIncludingGravity;varcurTime=newDate().getTime();if((curTime-last_update)>50){vardiffTime=curTime-last_update;last_update=curTime;x=acceleration.x;y=acceleration.y;z=acceleration.z;varspeed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000;if(speed>SHAKE_THRESHOLD){document.getElementById('audioBtn').play();setTimeout(function(){location.href='http://www.qq.com';},5000);}last_x=x;last_y=y;last_z=z;}}</script>