HTML5实现手机摇一摇的功能

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

创新互联公司是专业的市中网站建设公司，市中接单;提供成都网站设计、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行市中网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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

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

js如下：

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;
	}
}

html5页面如下：

在手机上试试....

OR

  
  
	  
	  
	  
	  
		//Javascript  
	  
  
  
用力摇一摇你手机
   

  
  

当前标题：HTML5实现手机摇一摇的功能
链接分享：http://shouzuofang.com/article/ppgioj.html