html5传感器

最新推荐文章于 2024-06-25 14:27:38 发布

「已注销」

最新推荐文章于 2024-06-25 14:27:38 发布

阅读量609

点赞数

本文链接：https://blog.csdn.net/oMiracle123/article/details/55046605

版权

html5传感器
以下是代码



    
  
  
    Title


x:
  
  
   
   x
  
  
y:
  
  
   
   y
  
  
z:
  
  
   
   z
  
  
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
    $(function () {
        var shakeThreshold = 1000; // 定义一个摇动的阈值
        var lastUpdate = 0; // 记录上一次摇动的时间
        var x, y, z, lastX, lastY, lastZ; // 定义x、y、z记录三个轴的数据以及上一次触发的数据

        // 监听传感器运动事件
        if (window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
        } else {
            alert('本设备不支持devicemotion事件');
        }

        // 运动传感器处理
        function deviceMotionHandler(eventData) {
            var acceleration = eventData.accelerationIncludingGravity; // 获取含重力的加速度
            $('#x').text(acceleration.x);
            $('#y').text(acceleration.y);
            $('#z').text(acceleration.z);
            var curTime = new Date().getTime();

            // 100毫秒进行一次位置判断
            if ((curTime - lastUpdate) > 100) {

                var diffTime = curTime - lastUpdate;
                lastUpdate = curTime;

                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;



                var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
                // 前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值，则判断设备进行了摇晃操作
                if (speed > shakeThreshold) {

                }

                lastX = x;
                lastY = y;
                lastZ = z;
            }
        }
    })

</script>



测试网址 可以观察x y z变化 http://newmiracle.cn/yaobai.html
ps 变化都是-10到10的变化 只要看整数就行 小数点不断的变化不用去鸟他

查看原文：http://newmiracle.cn/?p=1197