学习javaScript代码之开动的小汽车

最新推荐文章于 2022-12-14 13:25:01 发布

weixin_42902525

最新推荐文章于 2022-12-14 13:25:01 发布

阅读量368

点赞数

分类专栏：学习笔记文章标签：学习笔记

本文链接：https://blog.csdn.net/weixin_42902525/article/details/88640405

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习javaScript代码之开动的小汽车

这两天通过学习自己写了一小段代码，望指教！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>奔跑的小汽车</title>
    <link rel="stylesheet" href="test.css">
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
    <div id="box">
        <img src="img/car.png" alt="">
    </div>
</body>
</html>

#box {
    position: absolute;
    left: 200px;
    top: 150px;
}
#box img{
    width: 100px;
    height: 100px;
}

window.onload = function () {
    var box = document.getElementById('box');
    document.onkeydown = function(e) {
        var e = window.event || e;
        switch(e.keyCode)
        {
            case 37:
            box.style.transform = "rotate(-90deg)";
            box.style.left = box.offsetLeft - 10 + 'px';
            break;

            case 38:
            box.style.transform = "rotate(0deg)";
            box.style.top = box.offsetTop - 10 + 'px';
            break;

            case 39:
            box.style.transform = "rotate(90deg)";
            box.style.left = box.offsetLeft + 10 + 'px';
            break;

            case 40:
            box.style.transform = "rotate(180deg)";
            box.style.top = box.offsetTop + 10 + 'px';
            break;
        }
    };
};

在这里插入图片描述

weixin_42902525

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习javaScript代码之开动的小汽车

学习javaScript代码之开动的小汽车这两天通过学习自己写了一小段代码，望指教！&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device
复制链接

扫一扫