<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <meta name="format-detection" content="telephone=no" />

    <title> HTML5 重力感应效果，实现摇一摇效果 </title>

    <style>

        html,body,div,ul,li{

            margin: 0;

            padding: 0;

        }

        ul,li{

            list-style: none;

        }

        body{

            width:100%;

        }

        #box{

            width:90%;

            height:80px;

            background-color:orange;

            margin:0 auto;

            color:#fff;

            background-position: center -50px;

        }

    </style>

</head>

<body>

    <div id="box"></div>

<script>

        //摇晃的力度

        var SHAKE_THRESHOLD = 2000;

        var last_update = 0;

        //初始化重力感应位置

        var x = y = z = last_x = last_y = last_z = 0;  

        function deviceMotionHandler(eventData) {

            var acceleration = eventData.accelerationIncludingGravity;

            var curTime = new Date().getTime();

            if ( (curTime - last_update) > 100 ) {

                var diffTime = curTime - last_update;

                last_update = curTime;

                x = acceleration.x;

                y = acceleration.y;

                z = acceleration.z;

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

                last_x = x;

                last_y = y;

                last_z = z; 

                //获取 X Y Z 的数值

                document.getElementById('box').innerHTML = 'X:'+last_x+'<br> Y:'+last_y+'<br> Z:'+last_z; 

                //如果速度大于摇晃的力度那么执行alert

                if (speed > SHAKE_THRESHOLD) {

                    alert('摇一摇');

                }

            }

        }

        //判断是否支持重力感应

        if (window.DeviceMotionEvent) {

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

        } else {

            alert('not support mobile event');

        }  

</script>

</body>

</html>

　　

HTML5 重力感应效果，实现摇一摇效果的更多相关文章

  1. H5案例分享：html5重力感应事件

    html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...

  2. html5重力感应事件之DeviceMotionEvent

    前言 今天主要介绍一下html5重力感应事件之DeviceMotionEvent,之前我的一篇文章http://www.haorooms.com/post/jquery_jGestures, 介绍了第 ...

  3. HTML5重力感应小球冲撞动画实现教程

    今天我们来分享一款很酷的HTML5重力感应动画教程,这款动画可以让你甩动页面中的小球,小球的大小都不同,并且鼠标点击空白区域时又可以生成一定数量的小球.当我们甩动小球时,各个小球之间就会发生互相碰撞的 ...

  4. h5手机摇一摇功能实现：基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  5. 移动端html5重力感应

    下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/     http://06wjin.sinaapp.com/billd/test. ...

  6. html5重力感应事件

    if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, false); ...

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

    http://www.helloweba.com/view-blog-287.html HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们 ...

  8. HTML5实现“摇一摇”效果

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

  9. 手机摇一摇效果-html5

    1.手机摇一摇效果实现 2.播放声音 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

随机推荐

  1. Codeforces Beta Round #67 (Div. 2)C. Modified GCD

    C. Modified GCD time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  2. 【Codeforces】Round #375 (Div. 2)

    Position:http://codeforces.com/contest/723 我的情况 啊哈哈,这次raiting肯定要涨,接受过上次的教训,先用小号送肉,大号都是一发切,重回蓝咯 结果... ...

  3. PCB MongoDB 监控

    一个数据库监控工具是必不可少的,当然MongoDB安装自带监控啦. 这里将监控工具mongostat.exe与mongotop.exe使用与参数进行讲解说明. 一.监控工具说明: 二.监控工具启用 1 ...

  4. 9.11NOIP模拟题

    NOIP模拟赛 by thmyl   题目名称 superman market Lemon_Soda 可执行文件名 superman market Lemon_Soda 输入文件 superman.i ...

  5. JavaScript中什么是包装对象？

    存取字符串.数字或布尔值的属性时,创建的临时对象称为包装对象.包装对象只是偶尔用来区分字符串值和字符串对象.数字和数值对象以及布尔值和布尔对象.由于字符串.数字和布尔值的属性都是只读的,并且不能给它们 ...

  6. Akka源码分析-Actor发消息(续)

    上一篇博客我们分析道mailbox同时也是一个forkjointask,run方法中,调用了processMailbox处理一定数量的消息,然后最终调用dispatcher的registerForEx ...

  7. --NSArray与NSMutableArray用copy修饰还是strong（转）

    一.NSMutableArray 被copy.strong修饰后的变化: 把NSMutableArray用copy修饰有时就会crash,因为对这个数组进行了增删改操作,而copy后的数组变成了不可变 ...

  8. ZOJ3714JavaBeans

    #!/usr/bin/env python # encoding: utf-8 t = int(raw_input()) for i in range(t): n,k = [int(x) for x ...

  9. ZUK 22(Z2131) 免解锁BL 免rec 保留数据 Magisk Xposed 救砖 ROOT ZUI 4.0.199

    >>>重点介绍<<< 第一:本刷机包可卡刷可线刷,刷机包比较大的原因是采用同时兼容卡刷和线刷的格式,所以比较大第二:[卡刷方法]卡刷不要解压刷机包,直接传入手机后用 ...

  10. Android HTTP 数据提交

    在Android 项目中,使用HTTP协议获取数据或者处理数据,需要使用到多线程和配置相应的APP权限 1.使用线程,使用HTTP 提交数据 private Thread submitThread = ...