一个简单的HTML5摇一摇实例

最新推荐文章于 2020-06-04 17:01:13 发布

teemai

最新推荐文章于 2020-06-04 17:01:13 发布

阅读量7.6k

点赞数

分类专栏：前端开发专题文章标签： html5

本文链接：https://blog.csdn.net/withiter/article/details/40424321

版权

前端开发专题专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,
 maximum-scale=2.0"/>
<meta name="MobileOptimized" content="240"/>
<title>HTML摇一摇。。。</title>
 
<script type="text/javascript">
       var SHAKE_THRESHOLD = 3000;    
    var last_update = 0;    
    var x=y=z=last_x=last_y=last_z=0;   
	var  media; 
	
	function init(){
	last_update=new Date().getTime();
	media= document.getElementById("musicBox");
	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("shaked");		
		}    
		last_x = x;    
		last_y = y;    
		last_z = z;    
		}    
     
    }  

</script>


</head> 
 
<body οnlοad="init()"> 
html5手机摇一摇功能，摇一摇试试看
</body> 
 
</html>

teemai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
一个简单的HTML5摇一摇实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.
复制链接

扫一扫