JavaScript--键盘控制div移动

按键盘的上下左右按钮-->div移动

<body><div id="ok"></div>
</body>
<script>var dOk = document.getElementById("ok");window.onkeydown = function (e) {var l = dOk.offsetLeft;var t = dOk.offsetTop;if (e.keyCode === 37) {l -= 5;} else if (e.keyCode === 38) {t -= 5;} else if (e.keyCode === 39) {l += 5;} else if (e.keyCode === 40) {t += 5;}dOk.style.left = l + 'px';dOk.style.top = t + 'px';}
</script>

这样写按上下左右键div盒子运动不自然，而且只能直上直下不能斜着走。

<script>
//合适的打开方式：计时器＋状态//计时器var timer = null;//状态var isLeft = false;var isTop = false;var isRight = false;var isBottom = false;//键盘事件只修改状态window.onkeydown = function (e) {if (e.keyCode === 37) {isLeft = true;} else if (e.keyCode === 38) {isTop = true;}else if (e.keyCode === 39) {isRight = true;}else if (e.keyCode === 40) {isBottom = true;}}window.onkeyup = function (e) {if (e.keyCode === 37) {isLeft = false;} else if (e.keyCode === 38) {isTop = false;}else if (e.keyCode === 39) {isRight = false;}else if (e.keyCode === 40) {isBottom = false;}}//通过计时器实现移动timer = setInterval(function () {var l = dOk.offsetLeft;var t = dOk.offsetTop;//每个方向都得判断if (isLeft) { l -= 5; }if (isTop) { t -= 5; }if (isRight) { l += 5; }if (isBottom) { t += 5; }dOk.style.left = l + 'px';dOk.style.top = t + 'px';}, 30)
</script>

运用计时器和状态结合，这样盒子即可以直上直下也可斜着运动了

JavaScript--键盘控制div移动相关推荐

js实现键盘控制div移动（可加速）_☆往事随風☆的博客
文章目录前言一.基本思路二.代码分析 1.首先为div开启绝对定位 2.为document绑定键盘按下和抬起事件 3.获取对应键盘的Unicode编码 4.设置变量保存速度和键盘Unicode编 ...
c语言键盘移动解决停顿问题,原生js实现键盘控制div移动且解决停顿问题
首先说明下为什么会停顿? 效果 :用键盘控制一个div移动当按下一个方向键不放,div会先停顿一下,然后才开始持续移动. 原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间注:了解 ...
JavaScript或jQuery中使用键盘控制对象运动
<div id="monkey"><img src="img/monkey.png" ></div> 在JavaScript ...
html5 javascript 事件练习3键盘控制练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
html页面按钮隐藏div显示,javascript 控制 DIV等html元素的显示和隐藏
1.编写 js函数 function display(id){ var traget=document.getElementById(id); if(traget.style.display==&qu ...
JavaScript-定时器解决卡顿问题- 键盘控制移动div
demo: 用键盘上下左右键子,控制div 上下左右移动. 不加定时器的时候会感觉移动的时候有卡顿现象, 可以通过定时器来解决. <!DOCTYPE html> <html lang ...
JQuery键盘控制图片
JQuery键盘控制图片 <html><head><meta charset="UTF-8"><title></title&g ...
利用键盘控制小方块的移动
原理 1. 利用键盘控制移动,则需要了解onkeydown函数,表示某个按键被按下,可以以此绑定一个事件响应函数,当键盘被按下时候,触发此事件,进行移动 2. keyCode 对于keypress 事 ...
javascript + css 利用div的scroll属性让TAB动感十足
做了一个动感十足的TAB不敢独占,写出来大家共享,大家可以到宝宝孕历首页看看效果. 其实现是通过js控制div的scrollLeft属性来实现的,tab分成两个部分tab头部分和tab体部分,tab体 ...

JavaScript--键盘控制div移动

JavaScript--键盘控制div移动相关推荐

最新文章

热门文章