JS基础_定时器练习_使用键盘移动div

最新推荐文章于 2022-09-27 22:49:23 发布

VIP文章 fly-phantomWing

最新推荐文章于 2022-09-27 22:49:23 发布

阅读量194

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_41804367/article/details/108701789

版权

要求

使用定时器实现以下效果：点击键盘上的上下左右键时，div朝着相应的方向移动。

分析

想要div朝着相应的方向移动，首先我们要知道电脑如何识别键盘上的按键是否被点击了，也就是根据各个按键的编码来识别按键是否被点击，然而，当我们点击按键时，div会移动，并且可能一直超某个方向移动下去，因为我们使用了定时器，那么就需要设置当键盘上的按键松开时，就删除定时器，使div停止移动，我们可以设置一个变量来接收按键的编码，当按键被点击是，该变量对于当前按键的编码值，当键盘上的按键松开时，该变量等于0且删除定时器。代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div {
            width: 100px;
            height: 100px;
            background-color: red;
            /**
            开启定位
             */
            position: relative;
        }
    </style>
    <script>
        onload = function () {
            var div = document.getElementById("div");
            var speed = 10;//移动速度
            var dir = 0;//接收键盘按键的编码

最低0.47元/天解锁文章

fly-phantomWing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS基础_定时器练习_使用键盘移动div

要求使用定时器实现以下效果：点击键盘上的上下左右键时，div朝着相应的方向移动。分析想要div朝着相应的方向移动，首先我们要知道电脑如何识别键盘上的按键是否被点击了，也就是根据各个按键的编码来识别按键是否被点击，然而，当我们点击按键时，div会移动，并且可能一直超某个方向移动下去，因为我们使用了定时器，那么就需要设置当键盘上的按键松开时，就删除定时器，使div停止移动，我们可以设置一个变量来接收按键的编码，当按键被点击是，该变量对于当前按键的编码值，当键盘上的按键松开时，该变量等于0且删除定时器
复制链接

扫一扫