前端开发获得鼠标速度和加速度

php和前端移动开发 前端移动端开发规范 web前端开发移动端

代码:

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
    <title>获得鼠标速度和加速度</title>
    <meta name=”description” content=””>
    <meta name=”keywords” content=””>
    <link href=”” rel=”stylesheet”>
    <style>
        body {
            background-color: #000;
            color: gold;
            font-family: sans-serif;
        }
        span {
            color: yellow;
        }
    </style>
</head>
<body>
    Movement – X : <span id=”movementX”></span> px<br>
    Movement – Y : <span id=”movementY”></span> px<br>
    Movement : <span id=”movement”></span> px<br>
    Speed : <span id=”speed”></span> px/s<br>
    Max. Speed : <span id=”maxSpeed”></span> px/s<br>
    Acceleration : <span id=”acceleration”></span> px/s<sup>2</sup><br>
    Max. Positive Acceleration : <span id=”maxPositiveAcceleration”></span> px/s<sup>2</sup><br>
    Max. Negative Acceleration : <span id=”maxNegativeAcceleration”></span> px/s<sup>2</sup><br>
    <script>
        var prevEvent, currentEvent;
        document.documentElement.onmousemove = function (event) {
            currentEvent = event;
        }
        var maxSpeed = 0, prevSpeed = 0, maxPositiveAcc = 0, maxNegativeAcc = 0;
        setInterval(function () {
            if (prevEvent && currentEvent) {
                var movementX = Math.abs(currentEvent.screenX – prevEvent.screenX);
                var movementY = Math.abs(currentEvent.screenY – prevEvent.screenY);
                var movement = Math.sqrt(movementX * movementX + movementY * movementY);
                document.getElementById(“movementX”).innerText = movementX;
                document.getElementById(“movementY”).innerText = movementY;
                document.getElementById(“movement”).innerText = Math.round(movement);
                //speed=movement/100ms= movement/0.1s= 10*movement/s
                var speed = 10 * movement;//current speed
                document.getElementById(“speed”).innerText = Math.round(speed);
                document.getElementById(“maxSpeed”).innerText = Math.round(
                    speed > maxSpeed ? (maxSpeed = speed) : maxSpeed
                );
                var acceleration = 10 * (speed – prevSpeed);
                document.getElementById(“acceleration”).innerText = Math.round(
                    acceleration
                );
                if (acceleration > 0) {
                    document.getElementById(“maxPositiveAcceleration”).innerText = Math.round(
                        acceleration > maxPositiveAcc ? (maxPositiveAcc = acceleration) : maxPositiveAcc
                    );
                }
                else {
                    document.getElementById(“maxNegativeAcceleration”).innerText = Math.round(
                        acceleration < maxNegativeAcc ? (maxNegativeAcc = acceleration) : maxNegativeAcc
                    );
                }
            }
            prevEvent = currentEvent;
            prevSpeed = speed;
        }, 100);
    </script>
</body>
</html>

移动前端开发模板 前端和移动开发 武汉前端移动开发培训

» 本文来自:前端开发者 » 《前端开发获得鼠标速度和加速度》
» 本文链接地址:https://www.rokub.com/6085.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!