Javascript网页摇一摇

最新推荐文章于 2019-04-25 10:47:00 发布

转载最新推荐文章于 2019-04-25 10:47:00 发布 · 173 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用HTML5的DeviceMotionEvent事件实现摇一摇功能，包括加速度的获取与阈值设置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 function 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; 
　　} 
}

HTML5晃动DeviceMotionEvent事件

现在很多的手机页面上也有摇一摇功能了，比如什么领取红包，还有那种死命摇摇到100%弹出个什么东西来着，在坑爹点的摇个女票-_-//

deviceMotionHandler://运动传感器处理

last_update=curTime;//记录上一次摇动的时间
x=acceleration.x;//获取加速度X方向
y=acceleration.y;//获取加速度Y方向
z=acceleration.z;//获取加速度垂直方向

if (speed > SHAKE_THRESHOLD) {
　　　　　　// 在此处可以实现摇一摇之后所要进行的数据逻辑操作

}

然后再这里你可以做你想做的操作了

比如弹个框（你啥都没中到）

再比如来个

X++然后摇啊摇摇到100弹个什么

最后你可以在页面调用就可以了

<script>
$(document).ready(function(){
init();
});
</script>