使用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>
直接贴上就能够使用,但音乐链接要自己准备哦
使用Html5的DeviceOrientation特性实现摇一摇功能的更多相关文章
- Html5的DeviceOrientation特性
设备定位API 引用W3C中的设备定位API的规范描述可知,该API“……定义了多种新型DOM事件,旨在提供与主机设备相关的物理朝向与运动状态信息.”由API提供的数据产生自多种来源,其中包括设备上的 ...
- html5实现web app摇一摇换歌
微信可以摇歌曲,根据声音识别出歌曲,然后返回歌曲信息,利用html5的deviceOrientation特性和deviceMotion事件也可以在web app上实现类似于微信摇一摇的功能,原生的ap ...
- H5+JS实现手机摇一摇功能
在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...
- HTML5的DeviceOrientation实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- html5 DeviceOrientation来实现手机网站上的摇一摇功能
原文地址:http://www.cootm.com/?p=706 从网上转载看到的,感觉不错,就转过来了,特此感谢 cnblogs 的 幸福2胖纸的码农生活,直接转载了,不要介意!呵呵 以下是转载内容 ...
- html5实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- 用HTML5实现手机摇一摇的功能(转)
在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持.这个特性包括两种事件: 1.devi ...
- Adobe Edge Animate --使用HTML5实现手机摇一摇功能
Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...
随机推荐
- 函数 setjmp, longjmp, sigsetjmp, siglongjmp
一,相关函数接口 1,setjmp,longjmp,sigsetjmp,siglongjmp #include <setjmp.h> int setjmp(jmp_buf env); ...
- 游标-----内存中的一块区域,存放的是select 的结果
游标-----内存中的一块区域,存放的是select 的结果 游标用来处理从数据库中检索的多行记录(使用SELECT语句).利用游标,程序可以逐个地处理和遍历一次检索返回的整个记录集 ...
- SAR图像与光学图像区别
按传感器采用的成像波段分类,光学图像通常是指可见光和部分红外波段传感器获取的影像数据.而SAR传感器基本属于微波频段,波长通常在厘米级.可见光图像通常会包含多个波段的灰度信息,以便于识别目标和分类提取 ...
- Cloning Java objects using serialization
Sometimes you need to clone objects, and sometimes you can't use their clone method, and sometimes s ...
- 紫薇~还记得大明湖畔的HTML5智力拼图吗?
曲线谜团是非常有趣的HTML5智力游戏,据说超过多少分会有惊喜,游戏简单易操作,偶尔抛弃那种杀死脑细胞的大型游戏,玩玩这种简单经典的益智小游戏,放松放松,也是不错的选择嘛-将游戏 通过 统一开发环境( ...
- android在桌面弹出一个窗口
android在桌面弹出一个窗口 遇到了这种需求,要和iPhone一样的效果. 下面是简单实现功能,优化和美化部分,有时间慢慢搞. 方法应该有不少吧,我用的是弹出一个activity,将这个activ ...
- NOI2011 Day1
NOI2011 Day1 兔农 题目描述:\(fib[1]=fib[2]=1, fib[i]=fib[i-2]+fib[i-1] (i\geq 3)\),若\(fib[i] \equiv 1(mod ...
- MVVMLight Toolkit在Windows Phone中的使用扩展之一:在ViewModel中实现导航,并传递参数
MVVMLight是MVVM开发模式在Windows Phone平台下的一个开发框架,关于MVVMLight的基础使用,已经有人写的很好了,可以参照:MVVM.MVVMLight.MVVMLight ...
- Android SQLite 事务处理
应用程序初始化时需要批量的向sqlite中插入大量数据,单独的使用for+Insert方法导致应用响应缓慢,因为 sqlite插入数据的时候默认一条语句就是一个事务,有多少条数据就有多少次磁盘操作.我 ...
- ASP.NET LINQ SQL执行超时的问题
最近在写一个航材取价的程序.由于执行的语句复杂,数据量比较大,容易造成超时. 看提示应该是执行SQL的时候超时,我在程序中用的linq. 实际把SQL语句单独执行的时候观察也要40秒左右. 查资料得知 ...