用js实现摇一摇功能
2021-06-18 12:03
标签：date() 变量 handler div list style lis fft gravity HTML5晃动DeviceMotionEvent事件 现在很多的手机页面上也有摇一摇功能了，比如什么领取红包，还有那种死命摇摇到100%弹出个什么东西来着，在坑爹点的摇个女票-_-// deviceMotionHandler://运动传感器处理 last_update=curTime;//记录上一次摇动的时间 if (speed > SHAKE_THRESHOLD) { } 然后再这里你可以做你想做的操作了 比如弹个框（你啥都没中到） 再比如来个 X++然后摇啊摇摇到100弹个什么 最后你可以在页面调用就可以了 用js实现摇一摇功能 标签：date() 变量 handler div list style lis fft gravity 原文地址：http://www.cnblogs.com/wb336035888/p/7262461.htmlfunction init(){
if (window.DeviceMotionEvent) {
// 移动浏览器支持运动传感事件
window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);
}
}
var SHAKE_THRESHOLD = 3000;
// 定义一个变量保存上次更新的时间
var last_update = 0;
// 紧接着定义x、y、z记录三个轴的数据以及上一次出发的时间
var x;
var y;
var z;
var last_x;
var last_y;
var last_z;
var count = 0;
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;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 30000;
if (speed > SHAKE_THRESHOLD) {
// 在此处可以实现摇一摇之后所要进行的数据逻辑操作
}
//记录上一次加速度
last_x = x;
last_y = y;
last_z = z;
}
}
x=acceleration.x;//获取加速度X方向
y=acceleration.y;//获取加速度Y方向
z=acceleration.z;//获取加速度垂直方向
// 在此处可以实现摇一摇之后所要进行的数据逻辑操作