看微信摇一摇之后忽然想知道他是怎么写的。于是就在网上查了一些资料，有些是借鉴别人的。大家共同学习啊

先放代码

  1. <body onload="init()">
  2. <p>用力摇一摇你手机</p>
  3. <audio style="display:hiden;width:0px; height:0px;" id="musicBox" preload="metadata" controls src="swiper/music/default.mp3">  
  4.  
  5. <script>
  6. init();
  7. var SHAKE_THRESHOLD = 3000;//定义一个摇动的值
  8.         var last_update = 0;//定义一个变量保存上次更新的时间
  9.  
  10.         var x = y = z = last_x = last_y = last_z = 0;//定义xyz记录三个轴的数据以及上一次出发的时间
  11.         function init() {
  12.             if (window.DeviceMotionEvent) {
  13.                 window.addEventListener('devicemotion', deviceMotionHandler, false);
  14.             } else {
  15.                 alert('not support mobile event');
  16.             }
  17.         }
  18.         function deviceMotionHandler(eventData) {
  19.             var meda01=document.getElementById('musicBox');
  20.             var acceleration = eventData.accelerationIncludingGravity;//含重力加速度
  21.             var curTime = new Date().getTime();//获取当前时间
  22.             if ((curTime - last_update) > 100) {//curTime - last_update 是固定时间段
  23.                 var diffTime = curTime - last_update;
  24.                 last_update = curTime;
  25.                 //alert('last_update='+last_update)
  26.                 x = acceleration.x;
  27.                 //alert('x='+x)
  28.                 y = acceleration.y;
  29.                 //alert('y='+y)
  30.                 z = acceleration.z;
  31.                 //alert('z='+z)
  32.                 var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
  33.                 //alert('speed='+speed)  abs是取绝对值
  34.                 if (speed > SHAKE_THRESHOLD) {
  35.                     alert("摇动了+中大奖了，就是不知道有没有声音");
  36.                     media.setAttribute("src", "swiper/music/default.mp3");
  37.                     //setAttribute  锁定元素。此方法不能通过document对象调用，只能通过元素节点对象调用他
  38.                     //例如，你可以把他与getElementByTagName()方法结合起来，去查询每个<p>元素的title属性
  39.                     //var txt=document.getElementsByTagName('p')
  40.                     //for(var i=0;i<text.length;i++){
  41.                     //alert(txt[i].getAttribute('title'))
  42.                     //}
  43.                     //
  44.                     //
  45.                     //
  46.                     //
  47.                     media.load();
  48.                     media.play();
  49.                     meda01.play();
  50.                 }
  51.                 last_x = x;
  52.                 last_y = y;
  53.                 last_z = z;
  54.             }
  55.         }

html5 的 deviceorientation 他将底层的方向传感器和运动传感器进行了高级封装。提供了dom事件的支持。这个特性包括两种事件：

1.deviceOrientation:封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。

2.deviceMotion:封装了运动传感数据的事件，可以获取手机运行状态下的运动加速度等数据。使用它我们能够很容易的实现重力感应、指南针等有趣的功能

3.DeviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息。加速度的数据讲包含3个轴：x,y,z。该事件会返回两个属性，accelerationIncludingGravity(含重力的加速度)和acceleration(加速度)。

 1.【代码】监听运动传感事件

if(window.DeviceMotionEvent){
window.addEventListener('devicemotion',deviceMotionHandler,false);
}
 2.[代码]获取含重力的加速度

function deviceMotionHandler(eventData){
 var acceleration=eventData.accelerationIncludingGravity;
 }

js html5 仿微信摇一摇的更多相关文章

  1. JS HTML5仿微信朋友圈特效

    完美! 图片相册翻页可定位在第几张,右上角可关闭. 源代码下载地址: 链接: https://pan.baidu.com/s/1o7PA7wu 密码: asyt

  2. HTML5仿微信聊天界面、微信朋友圈实例

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...

  3. HTML5仿微信公众号界面

    jQuery连接: https://pan.baidu.com/s/1Qj948NPMDmcqzcMyKm8nMw 密码:vewr 图片连接: https://pan.baidu.com/s/1Fha ...

  4. Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例

    一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...

  5. h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘

    html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘 很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo ...

  6. h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗

    这段时间一直在着手h5开发手机端聊天系统——html5仿微信聊天室,最近又在原先基础上开发了一个仿微信.微博网页web版聊天系统,使用到了HTML5+css3+jQuery+wcpop等技术开发,弹窗 ...

  7. js微信摇一摇功能以及api

    一.摇一摇功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. android摇一摇实现(仿微信)

    这个demo模仿的是微信的摇一摇,是一个完整的demo,下载地址在最下面.下面是demo截图:                 步驟: 1.手机摇动监听,首先要实现传感器接口SensorEventLi ...

  9. html5实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

随机推荐

  1. chkconfig(check config)命令

    功能说明:chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接.  语 法:chkconfig ...

  2. 干货--微信公众平台客户端调试工具-初试WPF开发

    本工具可以由任意一个开发微信公众平台的开发者使用,虽然它本身使用WPF(C#)开发的,但是并不受你想调试的服务所用的语言的影响. 之前一直在做微信公众平台开发,客户端调试是必须做的事情,一直以来都是用 ...

  3. 新版本的strcpy_s

    char a[32] = "1234"; char b[32] ="123"; strcpy_s(b,sizeof(b), a + 2);//可以用strlen ...

  4. 树形dp入门

    poj2057 某公司的上下级关系是一颗树状结构,每个人不能与他的上司同时出现,每个人有一个值,求最大值. 这个题需要注意的是如果不保存状态会超时,这似乎也是大部分dp应该注意的事情啊 #includ ...

  5. OSG调试信息显示

    调试信息显示 OSG 可以将各式各样的调试信息输出到std:cout.这在开发OSG 程序时十分有用,你可以借此观察OSG 的执行的各种操作.环境变量OSG_NOTIFY_LEVEL用于控制OSG调试 ...

  6. Quick Sort In-place Implementation

    在线运行PHP http://www.compileonline.com/execute_php_online.php <?php function swap( &$a, &$b ...

  7. ROW_NUMBER()/RANK()/DENSE_RANK()/ntile() over()

    ROW_NUMBER()/RANK()/DENSE_RANK()/ntile() over()   今天女票问我SqlServer的四种排序,当场写了几句Sql让她了解,现把相关Sql放上来. 首先, ...

  8. App 冷启动：给 Android 的 Activity 添加一个背景

    2016/8/8 11:11:18 # 纠错 之前写的这篇内容的知识点有误,给大家造成了误导,深感抱歉. android 中给 Activity 设置背景的方法是在 style 文件中设置 windo ...

  9. 安装Visual Studio 2010之后怎样安装MSDN Library

    这篇博客参考自:http://justargon.blog.163.com/blog/static/21394413020134100737688/ MSDN2010安装及使用(MSDN Librar ...

  10. 深入理解7816（3）-----关于T=0

    卡片和终端之间的数据传输是通过命令响应的方式进行的,卡片只能被动地接收命令,并且给出响应.所有的命令都是以命令头开始,而该命令被完整地执行后(无论结果对错),必须以包含状态字(SW1 SW2)的响应结 ...