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网页摇一摇

关键词：JavaScript