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

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. Asp.net MVC学习

    一.mvc项目的创建并运行 1.启动vs2010 2.新建项目 3.选择Asp.net mvc应用程序 4.不创建测试用例 5.创建之后的效果 6.运行后的mvc程序

  2. windbg命令学习1

    一.windbg 常用知识: 1. Windbg中的调试命令,分为三种:基本命令,元命令和扩展命令.基本命令和元命令是调试器自带的,元命令总是以“.”开头,而扩展命令是外部加入的,总是以感叹号“!”开 ...

  3. 13.java.lang.NoSuchFiledException

    java.lang.NoSuchFiledException 方法不存在异常 当程序试图通过反射来创建对象,访问(修改或读取)某个filed,但是该filed不存在就会引发异常

  4. Tomcat 设置自动编译,自动发布,自动部署

    Tomcat服务器 具有一个常用的功能: 即自动编译,自动发布,自动部署功能. 问题: 当我们第一次发布程序以后,我们增删改Servelt,Java,.xml等文件,都必须重启Tomcat,如果项目巨 ...

  5. Oracle EBS-SQL (SYS-3):sys_人员用户名对应关系查询.sql

    select fu.user_name 用户名,       fu.description 描述,       (select ppf.FULL_NAME          from per_peop ...

  6. C#的线程池的那些事

    最近在做站时发现,线程池的问题很棘手,所以总结了一篇关于线程池的文章,原文地址:http://www.shuonar.com/blog/ac16496b-87ec-4790-a9ea-d69bbffa ...

  7. 搭建Android开发环境之——Android4.0.3, 4.1, 4.2, 4.3, 4.x，及升级 ADT（22.0.5）和SDK（22.x）

    1.首先要下载相关的软件 1). JDK 6 以上 2). eclipse( Version 3.6.2  or higher ) 点击下载 3). SDK(android-sdk_r18-windo ...

  8. bootstrap栅格系统的div高度怎样定？

    不能直接写px,不同设置分辨不同,div宽度始终是满屏的,如果高度指定像素大小,div就不能保证长宽比例恰当了. 解决方法: height:0px;padding-bottom:100%

  9. JavaSE思维导图(八)

  10. 七种Prolog解释器/编译器

    http://blog.sina.com.cn/s/blog_494e45fe0100lh1v.html PROLOG 人工智能领域常用的语言,开发自然语言分析,专家系统,以及所有和智能有关的程序,都 ...