<!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>
HTML5 重力感应效果，实现摇一摇效果
原文地址：https://www.cnblogs.com/zhoubingyan/p/8335032.html