HTML5實現手機搖一搖的功能

時間 2020-01-14

標籤 html5 html 實現手機功能欄目 HTML5 简体版

原文原文鏈接

利用html5實現相似微信的手機搖一搖功能，並播放音樂。javascript

一、 deviceOrientation：封裝了方向傳感器數據的事件，能夠獲取手機靜止狀態下的方向數據，例如手機所處角度、方位、朝向等。css

二、 deviceMotion：封裝了運動傳感器數據的事件，能夠獲取手機運動狀態下的運動加速度等數據。html

js以下：html5

<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頁面以下：java

<!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>

在手機上試試....jquery

ORweb

<!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" style="display:none;opacity:0; height:0px; width:0px;"></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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。