首页 > 代码库 > 使用Html5的DeviceOrientation特性实现摇一摇功能
使用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=http://www.mamicode.com/""/>>
直接贴上就可以使用,但音乐链接要自己准备哦
使用Html5的DeviceOrientation特性实现摇一摇功能
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。