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

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. J2SE知识点摘记(二十六)

    为了用“集合框架”的额外部分把排序支持添加到 Java 2 SDK,版本 1.2,核心 Java 库作了许多更改.像 String 和 Integer 类如今实现 Comparable 接口以提供自然 ...

  2. 获取考试成绩的sql语句

    as score,t_answer.id,t_answer.exams_name,t_answers.answer_id,t_answers.questions_id,t_answers.questi ...

  3. JavaEE Tutorials (19) - Web应用安全入门

    19.1Web应用安全概述29519.2保护Web应用安全296 19.2.1指定安全约束297 19.2.2指定认证机制300 19.2.3在部署描述文件中指定认证机制302 19.2.4声明安全角 ...

  4. 强烈推荐visual c++ 2012入门经典适合初学者入门

    强烈推荐visual c++ 2012入门经典适合初学者入门 此书循序渐进,用其独特.易于理解的教程风格来介绍各个主题,无论是编程新手,还是经验丰富的编程人员,都很容易理解. 此书的目录基本覆盖了Wi ...

  5. openstack 升级设计要求的指导原则

    不知道其他软件有没有类似的指导原则. Theory of Upgrade Grenade works under the following theory of upgrade. New code s ...

  6. Linux-storage-stack-diagram

    just a diagram 一目了然. 对于isci 只是用过LIO和STGT 两种后端. 这里有各种后端的比较. http://scst.sourceforge.net/comparison.ht ...

  7. Pig Latin儿童黑话（java）

     ●假设单词以辅音字母開始,将词首的辅音字母字符串(第一个元音字母前的全部字母)从单词的开头移动到末尾,然后加上后缀ay,这样就形成了它的pig  latin. ●假设单词以元音字母開始,仅仅须要 ...

  8. 杂记之activity之间的跳转

    代码结构图 manifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xml ...

  9. sass安装步骤

    sass 基于Ruby,首先需要安装Ruby.当然也有node-sass,那是另外一种使用方式了.如果能FQ的,就不用看了,主要写给翻不了墙的人用. 1.安装Ruby,ruby下载地址: http:/ ...

  10. Unity3D嵌入WPF教程

    Unity3D嵌入WPF教程 创建一个 类库工程 添加 WindowForm 用户控件 (UserControl) 1).引入 UntiyWebPlayer COM 组件 在工具->选择工具箱中 ...