使用Html5的DeviceOrientation特性实现摇一摇功能

现在很多的手机网站上也有类似于微信一样的摇一摇功能了,比如什么摇一摇领取红包,领取礼品等等

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>

直接贴上就可以使用,但音乐链接要自己准备哦

时间: 2024-11-08 00:07:30

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

Html5的DeviceOrientation特性

设备定位API 引用W3C中的设备定位API的规范描述可知,该API“……定义了多种新型DOM事件,旨在提供与主机设备相关的物理朝向与运动状态信息.”由API提供的数据产生自多种来源,其中包括设备上的陀螺仪.加速计以及指南针等.不同的设备所配备的数据来源也有所区别,具体情况取决于其上搭载的传感器类型. 该API从属于W3C Working Draft,也就是说相关规范并非最终确定.在未来其具体内容可能还会出现一定程度的变动.另外值得注意的是,已知该API在多种浏览器以及操作系统之上可能出现不一致

html5实现web app摇一摇换歌

微信可以摇歌曲,根据声音识别出歌曲,然后返回歌曲信息,利用html5的deviceOrientation特性和deviceMotion事件也可以在web app上实现类似于微信摇一摇的功能,原生的app实现也有相关接口,这里只考虑web app的情况...... Section One 先来看下demo效果图: 测试地址:http://hcy2367.github.io/music/,请在手机浏览器中打开该链接,建议WiFi下操作,否则一首歌几M的流量挺坑的,然后摇一摇换歌,操作可能会有点慢.

微信公众平台开发(108) 微信摇一摇

关键词:微信 摇一摇 DeviceOrientation DeviceMotion 本文介绍使用HTML5的DeviceOrientation特性在微信中实现摇一摇的功能. 在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientation事件提供了设备角度.朝向等信息).而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一

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

原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容. ——————————————————— 介绍之前做两个声明: 1.以下代码可以直接运行,当然你别忘了引用jQuery才行,我可提醒了,别到时候跑不起来骂我就成: 2.下面的实现思想参照了网上的一些文章,自己做了以下整理,对代码加入了一些注释说明,本人并非原创. 1 <html lang="

js html5 仿微信摇一摇

看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p>用力摇一摇你手机</p> <audio style="display:hiden;width:0px; height:0px;" id="musicBox" preload="metadata" controls src=&q

HTML5手机重力与方向感应的应用——摇一摇效果

http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果. DeviceOrientation包括两个事件: 1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方

HTML5实现“摇一摇”效果

在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientation事件提供了设备角度.朝向等信息). 而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果. 事件监听 演示地址:http://dtop.powereasy.net/UploadFiles/xzhihong/shake/demo.htm 把监听事件

html5实现微信摇一摇功能

在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientation事件提供了设备角度.朝向等信息).而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果. 运动事件监听 if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',

html5实现摇一摇功能

觉得挺好,就复制一下,以后或许用的着.... 用HTML5实现手机摇一摇的功能的教程 阅读:2057次   时间:2013-09-05 14:55:18   字体:[大 中 小] 在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件:1.  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度.方位.朝向