根据html5 DeviceOrientation 完成手机微信摇1摇作用

日期:2021-01-19 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

在HTML5中,DeviceOrientation特点所出示的DeviceMotion恶性事件封裝了机器设备的健身运动感应器時间,根据改時间能够获得机器设备的健身运动情况、加快度等数据信息(另也有deviceOrientation恶性事件出示了机器设备角度、房屋朝向等信息内容)。

而根据DeviceMotion对机器设备健身运动情况的分辨,则能够协助大家在网页页面上就完成“摇1摇”的互动实际效果。

健身运动恶性事件监视


拷贝编码
编码以下:

if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('你的手机上太差了,买个新的吧。');
}

获得加快度信息内容

“摇1摇”的姿势既“1定时执行间内机器设备了1定间距”,因而根据监视上1步获得到的x, y, z 值在1定时执行间范畴内的转变率,便可开展机器设备是不是有开展摇晃的分辨。而以便避免一切正常挪动的误判,必须给该转变率设定1个适合的临界值值。


拷贝编码
编码以下:

function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update) > 100) {
var diffTime = curTime - last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
var status = document.getElementById("status");
if (speed > SHAKE_THRESHOLD) {
doResult();
}
last_x = x;
last_y = y;
last_z = z;
}
}

实际效果如图所示: