HTML5实现手机摇一摇功能

最新推荐文章于 2022-08-05 17:45:12 发布

那迷离的背影

最新推荐文章于 2022-08-05 17:45:12 发布

阅读量511

点赞数 1

分类专栏： HTML5 移动端 javascript

javascript 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

移动端

2 篇文章 0 订阅

订阅专栏

HTML5新增了一些JavaScript API接口，比如地理定位、重力感应等。今天主要介绍devicemotion事件（设备事件），它提供设备的加速信息，表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。本文给大家讲解了HTML5实现手机摇一摇的效果。
HTML5 实现手机摇一摇 - 梦幻雪冰 - 梦幻雪冰

摇一摇的实现思路：
1、检测设备是否支持重力传感；
2、绑定运动传感（devimotion）事件；
3、根据devimotion事件对象，获取三个方向的重力加速度；
4、为了防止系统认为简单的变化也是在摇动手机，所以在每隔一段时间进行三个方向值的计算；
5、当计算的该值大于预定的值（阀值），执行相应的操作。

这里写图片描述

代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>梦幻雪冰、独行冰海</title>

    <meta name="viewport" content="width=device-width,user-scalable=no">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-1.8.3.min.js" charset="utf-8" type="text/javascript"></script>
    <style>
        html,
        body {
            height: 100%;
        }
        .wrap {
            height: 100%;
            background: yellow;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div class="wrap" id="con">梦幻雪冰、独行冰海</div>
    <script>
        var con = document.getElementById("con");

        (function(){
            // 监听运动传感事件，查看是否支持硬件运动
            if (window.DeviceMotionEvent) {
                window.addEventListener('devicemotion', deviceMotionHandler, false);
            } else {
                alert("您的设备不支持硬件调用");
            }

            // 变量初始化
            var x = 0, 
                y = 0, 
                z = 0, 
            lastX = 0, 
            lastY = 0, 
            lastZ = 0, 
          curTime = 0,
         lastTime = 0,
         diffTime = 0,
            speed = 0;

            // 设置一个阀值
            var SHAKE_THRESHOLD = 800;  // 设定摇晃的阈值为800 运行相应操作

            /*
             * @功能：测算三个方向重力加速度，达到一定值进行相应操作
             * @author：陈能堡
             *
             */
            function deviceMotionHandler(eventData){
                var acceleration = eventData.accelerationIncludingGravity;

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

                // 计算时间差，当这个差值大于一定值执行计算三个方向的速度
                if ((curTime - lastTime) > 100) {
                    // 记录上一次的时间
                    diffTime = curTime - lastTime;
                    lastTime = curTime;

                    // 获取当前三个方向的值
                    x = acceleration.x;
                    y = acceleration.y;
                    z = acceleration.z;

                    // 计算速度，为了防止出现负数，进行绝对值
                    speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000);

                    if (speed > SHAKE_THRESHOLD) {
                        alert("我实现摇一摇了");
                    };

                    // 记录上一次三个方向的值
                    lastX = x;
                    lastY = y;
                    lastZ = z;                  
                };
            }
        })();
    </script>
</body>
</html>

那迷离的背影

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5实现手机摇一摇功能

HTML5新增了一些JavaScript API接口，比如地理定位、重力感应等。今天主要介绍devicemotion事件（设备事件），它提供设备的加速信息，表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。本文给大家讲解了HTML5实现手机摇一摇的效果。 HTML5 实现手机摇一摇 - 梦幻雪冰 - 梦幻雪冰摇一摇的实现思路： 1、检测
复制链接

扫一扫