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

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. 13.java.lang.NoSuchFiledException

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

  2. ArcEngine做栅格数据拉伸

    //获得已打开的栅格数据 IRasterLayer rasterLayer = new RasterLayerClass(); rasterLayer = (IRasterLayer)axMapCon ...

  3. git配置别名

    配置别名   有没有经常敲错命令?比如git status?status这个单词真心不好记. 如果敲git st就表示git status那就简单多了,当然这种偷懒的办法我们是极力赞成的. 我们只需要 ...

  4. Day4_代码重用与函数

    知识点速记: 重用代码的方法:脚本包含require().include(); 全局配置文件php.ini(auto_prepend_file/auto_append_file); 目录配置文件.ht ...

  5. HTML加载顺序总结测试

    首先,页面加载顺序:解析HTML结构.加载外部脚本和样式表文件.解析并执行脚本代码.构造HTML DOM模型.加载图片等外部文件.页面加载完毕. 也就是:html → head → title → # ...

  6. 微信token认证方法原理

    var http = require('http'); var url = require("url"); var crypto = require("crypto&qu ...

  7. 链表-Add Two Numbers

    第一版代码(很挫很罗嗦,不过是第一次做,记录一下成长的脚步!继续努力!) /*struct ListNode { int val; struct ListNode *next; };*/ typede ...

  8. sass的cd进入目录

    今天在弄sass安装进入项目文件命令 直接f:

  9. Linux 内核优化

    声明:本文档来自互联网整理部份加自已实验部份所得: TCP 相关部份   经常使用名词说明: retries(再试).   TCP server <---> client通信状态      ...

  10. CTabCtrl - 如何使用TabCtrl控件

    CTabCtrl - 如何使用TabCtrl控件 建立一个基于对话框的MFC应用程序TabCtrlTest Step 1:在资源视图中,新建对话框资源,资源ID:IDD_TabCtrlExample_ ...