HTML5实现手机摇一摇的功能

发布时间：2020-08-04 10:25:00 作者：许琴
来源：网络阅读：695

利用html5实现类似微信的手机摇一摇功能，并播放音乐。

1、 deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。

2、 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

HTML5实现手机摇一摇的功能

js如下：

<scirpt>
var SHAKE_THRESHOLD = 3000;
var last_update = 0;
var x = y = z = last_x = last_y = last_z = 0;
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) {//一检测到摇动了，就5秒后跳转（此期间播放摇一摇的声音）
			alert("摇动了");
			media.setAttribute("src", "http://dx.sc.chinaz.com/files/download/sound1/201410/5018.wav");
			media.load();
			media.play();
			
			setTimeout(function(){location.href='http://www.baidu.com';},5000);}
		}
		last_x = x;
		last_y = y;
		last_z = z;
	}
}
</script>

html5页面如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />     
   <title>HTML5实现手机摇一摇的功能</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Mobile Devices Support @begin -->
    <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
    <meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
    <meta content="no-cache" http-equiv="pragma">
    <meta content="0" http-equiv="expires">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- apple devices fullscreen -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <!-- Mobile Devices Support @end -->
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />  
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
</head>
<body onLoad="init()">
 <img src="p_w_picpaths/bg.jpg" width="99%">
</body>
</html>

在手机上试试....

<!DOCTYPE html>
<html lang="en">  
<head>  
	<meta charset="utf-8" />  
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />  
	<title>摇一摇功能</title>  
	<script type="text/javascript">  
		//Javascript  
	</script>  
</head>  
<body onLoad="init()">  
<p>用力摇一摇你手机</p>   
<audio src="1.mp3" controls="controls" loop id="audioBtn" ></audio>
</body>  
</html>  
<script>
var SHAKE_THRESHOLD = 3000;  
var last_update = 0;  
var x = y = z = last_x = last_y = last_z = 0;  
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) > 50) {  
		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) {  
			document.getElementById('audioBtn').play();
			setTimeout(function(){location.href='http://www.qq.com';},5000);
		}  
		last_x = x;  
		last_y = y;  
		last_z = z;  
	}  
}
</script>

HTML5实现手机摇一摇的功能

相关阅读