<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title> HTML5 重力感应效果，实现摇一摇效果 </title> <style> 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; } </style> </head> <body> <div id="box"></div> <script> //摇晃的力度 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+'<br> Y:'+last_y+'<br> Z:'+last_z; //如果速度大于摇晃的力度那么执行alert if (speed > SHAKE_THRESHOLD) { alert('摇一摇'); } } } //判断是否支持重力感应 if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler, false); } else { alert('not support mobile event'); } </script> </body> </html>