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

先放代码

<body onload="init()">

<p>用力摇一摇你手机</p>

<audio style="display:hiden;width:0px; height:0px;" id="musicBox" preload="metadata" controls src="swiper/music/default.mp3">  

<script>

init();

var SHAKE_THRESHOLD = 3000;//定义一个摇动的值

        var last_update = 0;//定义一个变量保存上次更新的时间

        var x = y = z = last_x = last_y = last_z = 0;//定义xyz记录三个轴的数据以及上一次出发的时间

        function init() {

            if (window.DeviceMotionEvent) {

                window.addEventListener('devicemotion', deviceMotionHandler, false);

            } else {

                alert('not support mobile event');

            }

        }

        function deviceMotionHandler(eventData) {

            var meda01=document.getElementById('musicBox');

            var acceleration = eventData.accelerationIncludingGravity;//含重力加速度

            var curTime = new Date().getTime();//获取当前时间

            if ((curTime - last_update) > 100) {//curTime - last_update 是固定时间段

                var diffTime = curTime - last_update;

                last_update = curTime;

                //alert('last_update='+last_update)

                x = acceleration.x;

                //alert('x='+x)

                y = acceleration.y;

                //alert('y='+y)

                z = acceleration.z;

                //alert('z='+z)

                var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;

                //alert('speed='+speed)  abs是取绝对值

                if (speed > SHAKE_THRESHOLD) {

                    alert("摇动了+中大奖了，就是不知道有没有声音");

                    media.setAttribute("src", "swiper/music/default.mp3");

                    //setAttribute  锁定元素。此方法不能通过document对象调用，只能通过元素节点对象调用他

                    //例如，你可以把他与getElementByTagName()方法结合起来，去查询每个<p>元素的title属性

                    //var txt=document.getElementsByTagName('p')

                    //for(var i=0;i<text.length;i++){

                    //alert(txt[i].getAttribute('title'))

                    //}

                    //

                    //

                    //

                    //

                    media.load();

                    media.play();

                    meda01.play();

                }

                last_x = x;

                last_y = y;

                last_z = z;

            }

        }

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. WPF样式和资源2

    <Window.Resources> <FontFamily x:key="ButtonFontFamily">Time New Roman</Fon ...

  2. 高性能ORM框架XLinq功能详细介绍

    之前简单介绍了XLinq的一些功能,有很多功能都没有提到,现在给XLinq加了一些功能,这次把所有功能都介绍一遍. 设计目标 易用性 在使用一个框架的时候 应该没几个人会喜欢写一大堆的配置文件吧 也应 ...

  3. Mysql 储存过程以及 python callproc调用

    一.存储过程(stored procedure) 存储过程将存入的一系列SQL语句进行预编译,执行并存放在数据库中,之后如果需要使用sql语句对这一组sql进行访问时可以直接提取(很好理解 存储过程就 ...

  4. js图片实时加载

    浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高.以下是笔者目前所 ...

  5. CentOS 5设置服务器hostname、DNS和IP

    CentOS 5如何设置服务器主机名.DNS?设置主机名hostname编辑/etc/hostname文件写入:116.23.14.25 centostest.com其中116.23.14.25 表示 ...

  6. Jetty开发(2)

    部署web应用 配置了部署模块的Jetty服务器实例能够在webapps目录下热部署web应用.在webapps目录下标准的War包和jetty的配置文件能够被热部署进服务器需要符合下述规则: exa ...

  7. ac automaton 专题

    hdu2222 模板题 hdu2825 在ac自动机上的状压dp hdu3247 在ac自动机上bfs poj2778 求长度为n,不包含给定的m个字符串的任何一个的字符串的个数 其实就是求长度为n的 ...

  8. 被误解的 MVC 和被神化的 MVVM

    被误解的 MVC 和被神化的 MVVM 被误解的 MVC MVC 的历史 MVC,全称是 Model View Controller,是模型 (model)-视图 (view)-控制器 (contro ...

  9. ios晃动检测

    ios晃动检测  第一种 1.在AppDelegate.h中进行如下设置: - (BOOL)application:(UIApplication *)application didFinishLaun ...

  10. absolute vs fixed

    <!DOCTYPE html> <html> <head> <title>absolute和fixed的区别</title> <sty ...