移动端网页实现摇一摇打开咨询连接的方式

发布时间：2022-01-09 10:50 所属栏目：19 来源：互联网

导读：微信的摇一摇功能很强大，这个利用了手机的运动传感器装置的功能可以做很多有趣的事情，而在一般的web页面中，很少有机会去用到这个功能，但也不代表这个功能不可以用，今天361源码网就教大家如何在移动端网页利用摇一摇实现一些有趣的功能。在HTML5，devic

微信的摇一摇功能很强大，这个利用了手机的运动传感器装置的功能可以做很多有趣的事情，而在一般的web页面中，很少有机会去用到这个功能，但也不代表这个功能不可以用，今天361源码网就教大家如何在移动端网页利用摇一摇实现一些有趣的功能。

在HTML5，devicemotion事件deviceorientation特性的运动传感器的封装时间装置，你可以通过改变运动时间获取设备的状态，加速和其他数据（有另一个角度deviceorientation事件提供设备，定位等信息）。而我们可以在前端通过DeviceMotion对设备运动状态的判断，帮助我们在网页上就实现“摇一摇”的交互效果。

一、首先把监听时间绑定给 deviceMotionHandler；//先判断设备是否支持HTML5摇一摇功能；if (window.DeviceMotionEvent) {//获取移动速度，得到device移动时相对之前某个时间的差值比window.addEventListener('devicemotion', deviceMotionHandler, false);}else{alert('您好，你目前所用的设置好像不支持重力感应哦！');}

二、获取设备加速度信息 accelerationIncludingGravity；function deviceMotionHandler(eventData) {var acceleration = eventData.accelerationIncludingGravity,x, y, z;x = acceleration.x;y = acceleration.y;z = acceleration.z;document.getElementById("status").innerHTML = "x:"+x+"y:"+y+"z:"+z;}
“摇一摇”的动作既“一定时间内设备了一定距离”，因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，即可进行设备是否有进行晃动的判断。

三、而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值；//设置临界值,这个值可根据自己的需求进行设定，默认就3000也差不多了var shakeThreshold = 3000;//设置最后更新时间，用于对比var lastUpdate = 0;//设置位置速率var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=0;
我们在这里设置100毫秒进行一次位置判断，若前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值，则判断设备进行了摇晃操作。

（编辑：ASP站长网）