如今非常多的手机站点上也有类似于微信一样的摇一摇功能了，比方什么摇一摇领取红包，领取礼品等等

1,deviceOrientation:封装了方向传感器数据的事件，能够获取手机静态状态下的方向数据，如手机所处的角度，方位，朝向等

2，deviceMotion:封装了运动传感器数据事件，能够获取手机运动状态下的运动加速度数据

多说无益，代码才健康：

<!DOCTYPE html>

<html>

	<head>

		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>

		<title>摇一摇功能</title>

		<script type="text/javascript">

			window.onload=function(){init();}

			var SHAKE_THRESHOLD=3000;//定义一个摇动的阈值

			var last_update=0;//定义一个变量记录上一次摇动的时间

			var x=y=z=last_x=last_y=last_z=0;//定义x、y、z记录三个轴的数据以及上一次触发的时间

			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();//获取当前时间戳

				var diffTime=curTime-last_update;

				if(diffTime>100){

					last_update=curTime;//记录上一次摇动的时间

					x=acceleration.x;//获取加速度X方向

					y=acceleration.y;//获取加速度Y方向

					z=acceleration.z;//获取加速度垂直方向

					var speed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000;//计算阈值

					if(speed>SHAKE_THRESHOLD){

						alert("摇动了，关闭播放自己主动播放");

						var media=document.getElementById("musicBox");//获取音频控件

						media.setAttribute("src","http://192.168.1.125/mohe/upload/audio/20140930/20140930114522_485.mp3");

						media.load();//载入音频

						media.play();//播放音频

					}

					//记录上一次加速度

					last_x=x;

					last_y=y;

					last_z=z;

				}

			}

		</script>

	</head>

	<body>

		<p>摇一摇播放音乐吧</p>

		<audio id="musicBox" controls="true" src=""/>

	</body>

</html>

直接贴上就能够使用，但音乐链接要自己准备哦

使用Html5的DeviceOrientation特性实现摇一摇功能的更多相关文章

  1. Html5的DeviceOrientation特性

    设备定位API 引用W3C中的设备定位API的规范描述可知,该API“……定义了多种新型DOM事件,旨在提供与主机设备相关的物理朝向与运动状态信息.”由API提供的数据产生自多种来源,其中包括设备上的 ...

  2. html5实现web app摇一摇换歌

    微信可以摇歌曲,根据声音识别出歌曲,然后返回歌曲信息,利用html5的deviceOrientation特性和deviceMotion事件也可以在web app上实现类似于微信摇一摇的功能,原生的ap ...

  3. H5+JS实现手机摇一摇功能

    在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...

  4. 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能

      介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...

  5. HTML5的DeviceOrientation实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  6. html5 DeviceOrientation来实现手机网站上的摇一摇功能

    原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容 ...

  7. html5实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  8. 用HTML5实现手机摇一摇的功能(转)

    在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...

  9. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

随机推荐

  1. LINUX查看硬件配置命令

    LINUX查看硬件配置命令   系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinf ...

  2. Silverlight第三方控件专题

    原文http://www.cnblogs.com/nasa/archive/2008/12/01/1344927.html 这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏 ...

  3. javascript数组排序---2冒泡

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. bit-map牛刀小试：数组test[X]的值所有在区间[1, 8000]中， 现要输出test中反复的数。要求:1. 不能改变原数组; 2.时间复杂度为O(X);3.除test外空间不超过1KB

    先来看看这个题目:数组test[X]的值所有在区间[1, 8000]中. 现要输出test中反复的数.要求:1. 不能改变原数组; 2.时间复杂度为O(X);3.除test外空间不超过1KB. 好, ...

  5. MATLAB中return和break

    return: RETURN Return to invoking function. RETURN causes a return to the invoking function or to th ...

  6. 百度apistore第三方登陆使用说明

    最近做一个个人博客,其中的登陆模块我想使用第三方登陆来做.上网搜一下有好多例子,但是大多数都是一个网站的第三方登陆,如QQ.微博.人人,没有集成的组件,于是就在网上搜一下百度的apistore,百度果 ...

  7. JSTL入门

    在页面最上方引入 -------------------- if语句 8}"> b的值大于8 --------------------- foreach语句 i的值是:${i}

  8. OSCache缓存框架介绍

          OSCache是一种开放性的JSP定制标记应用,由OpenSymphony设计,提供了在现有JSP页面之内实现快速内存缓冲的功能. OSCache是个一个广泛采用的高性能的J2EE缓存框架 ...

  9. hadoop搭建杂记：Linux下hadoop的安装配置

    VirtualBox搭建伪分布式模式:hadoop的下载与配置 VirtualBox搭建伪分布式模式:hadoop的下载与配置 由于个人机子略渣,无法部署XWindow环境,直接用的Shell来操作, ...

  10. yii2.0 控制器方法 视图表单 Form表单处理

    假设我们在ArticleController.php下面的actionForm方法中来处理提交的表单 新建立一个 views/Article/article-form.php文件用来作为输入表单 &l ...