键盘移动小div(js原生)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
   div{
       width:100px;
       height:100px;
       background-color:red;
       position:absolute;
       left:100px;
       top:100px;
   }
</style>
</head>

<body>
   <div id="div1"></div>
   <script>
       var div1 = document.getElementById("div1");
           var l = false,
               t = false,
               r = false,
               b = false;

           document.onkeydown = function(ev) {
               switch (ev.keyCode) {
                   case 37:
                       l = true;
                       break;
                   case 38:
                       t = true;
                       break;
                   case 39:
                       r = true;
                       break;
                   case 40:
                       b = true;
                       break;
               }

               if (l) {
                   div1.style.left = div1.offsetLeft - 5 + "px";
               }
               if (t) {
                   div1.style.top = div1.offsetTop - 5 + "px";
               }
               if (r) {
                   div1.style.left = div1.offsetLeft + 5 + "px";
               }
               if (b) {
                   div1.style.top = div1.offsetTop + 5 + "px";
               }

           }

           document.onkeyup = function() {
               l = false;
               t = false;
               r = false;
               b = false;
           }
   </script>
</body>
</html>

转载于:https://www.cnblogs.com/yuejie/p/5986357.html

键盘移动小div(js原生)相关推荐

c语言键盘移动解决停顿问题,原生js实现键盘控制div移动且解决停顿问题
首先说明下为什么会停顿? 效果 :用键盘控制一个div移动当按下一个方向键不放,div会先停顿一下,然后才开始持续移动. 原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间注:了解 ...
好玩的小游戏系列（一）基于html+js 原生贪吃蛇
一朵花如果只被用来观赏那只呈现出它的外在意义只是它生命的一部分若是不能够将其内在更实质的美发挥出来充其量也不过就是一朵死的花而已. 目录一.前言二.代码介绍三.效果显示四.编码实现 index ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
基于js原生算法＋cocos游戏引擎+uni框架Cloud托管网页：开发2048小游戏域名发布版本
目录首先看一下效果图 CocosCreator游戏引擎 block绑定: canvas绑定: cocos中创建脚本js以及js原生算法然后我们先看game.js 背景方法及包含的原生算法代码: 开 ...
js实现键盘操作对div的移动或改变-------Day43
<爸爸去哪儿>的第二季据说要开播了额,有点小期待,不知道这一季的小宝贝们会有多萌,还会甜到心底吧, 哈哈,还记得那个风一样的女子呢,不知道她现在如何了. 言归正传,继续今天的记录,实际上在 ...
JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
【超详细】JS原生——别踩白块游戏
本次做的小例子是用原生js写的一个小游戏--别踩白块,js中的注释都给详细写出来了步骤,可以互相学习,有兴趣的话可以跟着步骤一起写一遍! <!DOCTYPE html> <html ...
html小Demo: js调用java后端提供的接口
文章目录 html小Demo: js调用java后端提供的接口 html常用的一些标签(初级版)以及对html的一些理解的笔记 head常用标签 body常用标签 JavaScript Java sp ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...

键盘移动小div(js原生)

键盘移动小div(js原生)相关推荐

最新文章

热门文章