zoukankan      html  css  js  c++  java
  • html5陀螺仪

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            /**
                1.deviceorientation 设备的物理方向信息,表示为一系列本地坐标的旋角
                2.devicemotion 设备加速信息
                3.compassneedscalibration 通知web站点使用罗盘信息校准上述事件 
            */
            //获取旋转角度
            window.addEventListener("deviceorientation",function(event){
                /**
                    alpha 以z为轴取值在(0,360)
                    beta 以x为轴取值为(-180,180)
                    gamma 以y为轴取值为(-90,90)
                */
                console.log(event.alpha,event.beta,event.gamma)
            },true);
            //获取罗盘校准
            window.addEventListener("compassneedscalibration",function(event){
                alert("请校准你的罗盘!");
                event.preventDefault();
            },true)
            //获取重力加速度
            window.addEventListener("devicemotion",function(event){
                //处理event.acceleration
                //x y z 方向移动加速度值
                //event.accelerationIncludingGravity
                //考虑重力加速度后设备在x y z 的值
                //event.rotationRate
                //alpha beta gamma 设备绕x y z 旋转的角度
                //摇一摇示例
                /**
                    var speed = 30;
                    var x = y =z = lastX = lastY = lastZ = 0;
                    function deviceMotionHandler(eventData){
                        var acceleration = eventData.accelerationIncludingGravity;
                        x = acceleration.x;
                        y = acceleration.y;
                        z = acceleration.z;
                        if(Math.abs(x-lastX) > speed || Masth.abs(y-lastY) > speed ||Masth.abs(z-lastZ) > speed ){
                            //触发摇一摇
                            alert(1);
                        }
                    }
                */
            },true);
    
        </script>
    </body>
    </html>
  • 相关阅读:
    js字符串截取函数slice()、substring()、substr()
    js获取字符串最后一位方法
    支持xhr浏览器:超时设定、加载事件、进度事件
    深入理解ajax系列第一篇——XHR对象
    MySQL命令行操作
    nodejs中mysql用法
    大衍数列
    牌型种数
    加法变乘法
    三羊献瑞
  • 原文地址:https://www.cnblogs.com/y-y-y-y/p/13309515.html
Copyright © 2011-2022 走看看