HTML5实现手机摇一摇的功能

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

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

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

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

HTML5实现手机摇一摇的功能

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页面如下:




         
   HTML5实现手机摇一摇的功能
    
    
    
    
    
    
    
    
    
    
    
     
    
    
    
    
      
    


 

在手机上试试....

OR


  
  
	  
	  
	摇一摇功能  
	  
		//Javascript  
	  
  
  

用力摇一摇你手机

         


网页标题:HTML5实现手机摇一摇的功能
转载来源:http://lszwz.com/article/ppgioj.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉,无效全额退款