手机浏览器摇一摇
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>摇一摇</title> </head> <body> <p>摇一摇!</p> <audio style="display: none;" src="http://downsc.chinaz.net/files/download/sound1/201410/5018.mp3" id="musicBox" preload="preload" controls></audio> <script> var SHAKE_THRESHOLD = 3000; var last_update = 0; var x=y=z=last_x=last_y=last_z=0; var media; media= document.getElementById("musicBox"); function init(){ last_update=new Date().getTime(); if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); } else{ alert('not support mobile event'); } } 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; if (speed > SHAKE_THRESHOLD) { media.play(); alert("已经触发了摇一摇"); } last_x = x; last_y = y; last_z = z; } } window.onload = function(){ init(); } </script> </body> </html>