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

如今非常多的手机站点上也有类似于微信一样的摇一摇功能了,比方什么摇一摇领取红包,领取礼品等等

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>

直接贴上就能够使用,但音乐链接要自己准备哦

上一篇:mybatis resultMap 映射配置


下一篇:newsstand杂志阅读应用源码ipad版