html5传感器

html5传感器
以下是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache" />
    <title>Title</title>

</head>
<body>
x:<div style="font-size: 55px;" id="x">x</div>
y:<div style="font-size: 55px;" id="y">y</div>
z:<div style="font-size: 55px;" id="z">z</div>
speed:<div style="font-size: 55px;" id="speed">speed</div>
<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;
                $('#speed').text(speed);
                // 前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值,则判断设备进行了摇晃操作
                if (speed > shakeThreshold) {
                    alert('摇动了');
                }

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

</script>
</body>
</html>

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

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=1197

发表评论

电子邮件地址不会被公开。 必填项已用*标注