利用HTML5在手机网站上实现摇一摇功能

yaozheng   发布于 2016年08月03日   阅读次数: 335   我想说两句

Tag: html5 devicemotion 摇一摇

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>摇一摇测试</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
 </head>

 <body>
	使劲摇你的手机看看

<script>
var SHAKE_THRESHOLD = 2000;
var last_update = 0;
var x=y=z=last_x=last_y=last_z=0;
init();
function init(){
	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) {
			alert("摇动了");
		}
		last_x = x;
		last_y = y;
		last_z = z;
	}
}
</script>
 </body>
</html>