Javascript网页摇一摇

 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>

秒客网

Javascript网页摇一摇

相关文章