html 重力感应效果 HTML5 重力感应效果 实现摇一摇效果

HTML5 重力感应效果，实现摇一摇效果

html,body,div,ul,li{

margin: 0;

padding: 0;

}

ul,li{

list-style: none;

}

body{

width:100%;

}

#box{

width:90%;

height:80px;

background-color:orange;

margin:0 auto;

color:#fff;

background-position: center -50px;

}

//摇晃的力度

var SHAKE_THRESHOLD = 2000;

var last_update = 0;

//初始化重力感应位置

var x = y = z = last_x = last_y = last_z = 0;

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;

last_x = x;

last_y = y;

last_z = z;

//获取 X Y Z 的数值

document.getElementById('box').innerHTML = 'X:'+last_x+'

Y:'+last_y+'

Z:'+last_z;

//如果速度大于摇晃的力度那么执行alert

if (speed > SHAKE_THRESHOLD) {

alert('摇一摇');

}

}

}

//判断是否支持重力感应

if (window.DeviceMotionEvent) {

window.addEventListener('devicemotion', deviceMotionHandler, false);

} else {

alert('not support mobile event');

}