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

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. Python核心编程笔记--unicode编码

    #定义编码方式,与物理文件. code='utf-8'file='D:/utf8.txt' #把编码后的字符写入文件. hello_out =u'hello world'bytes_out =hell ...

  2. Android使用VideoView播放网络视频

    Android支持播放网络上的视频.在播放网络上的视频时,牵涉到视频流的传输,往往有两种协议,一种是HTTP,一种是RTSP.这 两种协议最大的不同是,HTTP协议,不支持实时流媒体的播放,而RTSP ...

  3. C/C++代码静态检查工具Cppcheck在VS2008开发环境中的安装配置和使用

    Cppcheck is an analysis tool for C/C++code. Unlike C/C++ compilers and many other analysis tools, it ...

  4. 07.20 html5的适配flexible

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"> ...

  5. windows 7 memcached报failed to install service or service already installed的解决方案

    今天心血来潮捣鼓一下memcache,由于系统是windows 7,我参考了 Windows下安装Memcache 使用memcached for Win32. 在运行memcached.exe -d ...

  6. Android @+id与@id的区别

      Android中的组件需要用一个int类型的值来表示,这个值也就是组件标签中的id属性值.id属性只能接受资源类型的值,也就是必须以@开头的值,例如,@id/abc.@+id/xyz等. 如果在@ ...

  7. 使用Vitamio打造自己的Android万能播放器（7）——在线播放（下载视频）

    前言 本章将实现非常实用的功能——下载在线视频.涉及到多线程.线程更新UI等技术,还需思考产品的设计,如何将新加的功能更好的融入到现有的产品中,并不是简单的加一个界面就行了,欢迎大家交流产品设计和技术 ...

  8. CSS：margin负数的使用

    给所有div加上边框=10px之后,再给所有div设置margin-left与margin-top;以及浮动(float:left) 因此时需要鼠标悬停效果:所以设置给div设置伪类:hover,然因 ...

  9. (转)eclipse 启动参数介绍（如添加插件时，如果不显示，则使用eclipse -clean启动）

    本文转载自:http://hi.baidu.com/dd_taiyangxue/blog/item/08950f3991b4e8c9d46225c8.html 其实,Eclipse是一个可以进行非常灵 ...

  10. AlarmManager类的应用

    1.AlarmManager,顾名思义,就是“提醒”,是Android中常用的一种系统级别的提示服务,可以实现从指定时间开始,以一个固定的间隔时间执行某项操作,所以常常与广播(Broadcast)连用 ...