如何用JS写一个简单的键盘移动

淩亂°似流年 2024-04-17 19:54 48阅读 0赞

由于这个操作比较简单，我们直接上代码。

## css ##

div{
                width: 50px;
                height: 50px;
                border-radius: 50%;
                position: absolute;
                top: 0px;
                left: 0px;
                background: #000;
            }

## html ##

<div></div> //一个div足矣

## js代码 ##

var div = document.querySelector("div");
        var clientW = document.documentElement.clientWidth;	//可视距离的宽
        var clientH = document.documentElement.clientHeight;//可视距离的高，这跟浏览器显示大小相关，//浏览器窗口大小的变化会导致值的变化
        
        document.onkeydown = function(eve){
            var w = div.offsetWidth;		//定义div的宽高
            var h = div.offsetHeight;
            var e = eve||window.event;		//获取事件对象并且兼容 IE  ||后面是IE写法 
            var code = eve||window.which;
            var l = div.offsetLeft;		//定义左偏移量
            var t = div.offsetTop;
            console.log(w,h,l,t)
            switch(code.keyCode){		//判断方向键的ascii码
                case 37:		//左
                    div.style.left = l - 20+"px";break;
                case 38:		//上
                    div.style.top = t - 20+"px";break;
                case 39:		//右
                    div.style.left = l +20+"px";break;
                case 40:		//下
                    div.style.top = t +20+"px";break;
            }
            if(div.offsetLeft < 0){
                div.style.left = clientW- w+'px'; //判断div是否达到左边界，如果是则让它回到右边
                
                }
            if(div.offsetTop<0){
                div.style.top = clientH - h+'px'; //判断div是否达到上边界，如果是则让它回到下边
                
                }
            if( div.offsetLeft > clientW - w){ //判断div是否达到右边界，如果是则让它回到左边
                div.style.left = 0+'px';
                }
            if(div.offsetTop > clientH - h){ //判断div是否达到下边界，如果是则让它回到上边
                div.style.top=0+'px';
                }
    
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，48人围观）

还没有评论，来说两句吧...

相关阅读

相关如何用JS写一个简单的键盘移动

于这个操作比较简单，我们直接上代码。 css div{ width: 50px; heig...

淩亂°似流年/ 2024年04月17日 19:54/ 0 赞/ 49 阅读

相关用原生js写一个简单的信息对话框

提示因为要实现两个对话框效果，所以我们这边设置的是自我对话，无聊的同学可以用这个来打发时间，说不定能找到更多灵感(●’◡’●) JS代码 var o...

红太狼/ 2024年04月17日 06:05/ 0 赞/ 57 阅读

相关如何动手用js自己写一个分页？

实现效果 ![b563cfe6a2b4597ce35316ecf3e629ce.png][] 实现代码 function generateTableHead()

一时失言乱红尘/ 2024年03月17日 13:58/ 0 赞/ 59 阅读

相关 JS实现键盘移动光标

通过键盘的上下左右，实现对光标的移动，当点击回车时，进入所选的对应页面。左边是菜单栏，右边是具体数据。 ![Center][] 左边的菜单栏布局 ![Ce

╰半橙微兮°/ 2023年10月17日 08:29/ 0 赞/ 133 阅读

相关用css写一个简单的太阳系

用css写一个简单的太阳系，当然下面的太阳与地球是图片 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

青旅半醒/ 2023年06月13日 11:09/ 0 赞/ 9 阅读

相关 js键盘事件--实现div移动

用键盘事件实现div移动键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作 onkeyup 按键松开这两个事件一般会绑定给可

野性酷女/ 2022年11月29日 14:29/ 0 赞/ 215 阅读

相关用JS手写一个简单的Promise

参照[Promise/A+规范][Promise_A]手写了一个简化版的promise class MyPromise { constructor(fn

系统管理员/ 2022年11月28日 13:16/ 0 赞/ 296 阅读

相关如何用C#写一个简单的Login窗口

最近，看到网上经常会问如何进行窗口跳转，大多数的问题都是牵扯到Login窗口。其实，在Visual Studio 6以来，比较正确的做法，是判断Login窗口的返回值，然

短命女/ 2022年10月01日 02:54/ 0 赞/ 172 阅读

相关如何手写一个简单的LinkedList

这是我写的第三个集合类了，也是简单的实现了一下基本功能，这次带来的是LinkedList的写法，需要注意的内容有以下几点： 1.LinkedList是由链表构成的，链表的核心

淩亂°似流年/ 2022年05月12日 12:36/ 0 赞/ 253 阅读

相关 js如何实现利用键盘控制div移动

js如何实现利用键盘控制div移动描述： div通过键盘事件上下左右实现div块的移动

红太狼/ 2020年06月06日 18:42/ 0 赞/ 867 阅读