使用Html5的DeviceOrientation特性实现摇一摇功能

浏览数：38 / 时间：2015年06月09日

现在很多的手机网站上也有类似于微信一样的摇一摇功能了，比如什么摇一摇领取红包，领取礼品等等

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

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

多说无益，代码才健康：

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title>摇一摇功能</title>
		<script type="text/javascript">
			window.onload=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 media=document.getElementById("musicBox");//获取音频控件
						media.setAttribute("src","http://192.168.1.125/mohe/upload/audio/20140930/20140930114522_485.mp3");
						media.load();//加载音频
						media.play();//播放音频
					}
					//记录上一次加速度
					last_x=x;
					last_y=y;
					last_z=z;
				}
			}
		</script>
	</head>
	<body>
		<p>摇一摇播放音乐吧</p>
		<audio id="musicBox" controls="true" src=""/>
	</body>
</html>

直接贴上就可以使用，但音乐链接要自己准备哦

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

使用Html5的DeviceOrientation特性实现摇一摇功能