发布时间:2019-12-26 08:40:14 作者:佚名 阅读:(1268)
最近有朋友在问有没有手机摇一摇并震动的功能,刚好手里有一份代码,接下来吾爱编程就为大家分享一下利用html5实现类似微信的手机摇一摇功能并震动,有需要的小伙伴可以参考一下:
封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。
封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
JS代码如下:
var speed = 10; //定义摇一摇加速度的临界值 值越小摇动的力度越小 var x = y = z = lastX = lastY = lastZ = 0; //初始化x,y,z上加速度的默认值 var isHaveShaked = false;//用于记录是否在动画执行中 function init() { //判断系统是否支持html5摇一摇的相关属性 if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler, false); } else { alert('not support mobile event'); } } function deviceMotionHandler() { /*获取x,y,z方向的即时加速度*/ var acceleration = event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed || Math.abs(z - lastZ) > speed) { //摇一摇实际场景就是加速度的瞬间暴增爆减 if (!isHaveShaked) { alert(x); //自己测试各坐标的值。。 alert(y) alert(z); //手机震动1秒 if (navigator.vibrate) { navigator.vibrate(1000);//震动1000毫秒 } else if (navigator.webkitVibrate) { navigator.webkitVibrate(1000); } //模拟网络请求做想干的事 isHaveShaked = true; setTimeout(function () { isHaveShaked = false; //..... }, 2000); } } /*保存历史加速度*/ lastX = x; lastY = y; lastZ = z; } $(function () { init(); });
源码下载请点击附件:附件下载
以上就是吾爱编程为大家介绍一下html5实现类似微信的手机摇一摇功能并震动的功能,了解更多相关文章请关注吾爱编程网!
欢迎分享转载→ html5实现摇一摇_html5实现摇一摇并震动代码下载
© 2015-2021 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们 - 意见反馈