onkeydown小练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>键盘事件小练习</title>

    <style>

        #mydiv{

            width: 30px;

            height: 30px;

            background-color: red;

            position: absolute;

            left: 0;

            top: 0;

        }

    </style>

</head>

<body>

<div id="mydiv"></div>

<script>

    var myDiv = document.getElementById("mydiv");

    var xs = 0;

    var xv = 30;

    var ys = 0;

    var yv = 30;

    document.onkeydown = function(event){

        var kc = event.keyCode;

        switch (kc){

            case 37:

                xs -= xv;

                myDiv.style.left = xs+"px";

                myDiv.style.backgroundColor = "red";

                break;

            case 38:

                ys -= yv;

                myDiv.style.top = ys + "px";

                myDiv.style.backgroundColor = "blue";

                break;

            case 39:

                xs+=xv;

                myDiv.style.left = xs+"px";

                myDiv.style.backgroundColor = "green";

                break;

            case 40:

                ys += yv;

                myDiv.style.top = ys + "px";

                myDiv.style.backgroundColor = "yellow";

                break;

        }

    }

</script>

</body>

</html>
巴特西

onkeydown小练习

最新文章

热门文章
