javascript入门基础小案例-----按键盘的方向键来控制块的移动z注释：

r囧r小猫 2022-08-21 08:58 5阅读 0赞

**这个小例子中应注意的是再次修改快的属性值：**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
<title>网页标题</title>  
<meta name="keywords" content="关键字列表" />  
<meta name="description" content="网页描述" />  
<link rel="stylesheet" type="text/css" href="" />  
<style type="text/css">  
/\*\*\*\*\*\*\*习惯性先去掉网页的边距\*\*\*\*\*\*\*\*/  
body,div\{margin:0;padding:0\}  
div\{width:100px;height:100px;background:red;position:absolute;top:50px;left:50px\}  
</style>  
<script type="text/javascript">  
//先加载页面  
window.οnlοad= function ()\{  
var dx=50;  
var dy =50  
//创建一个键盘控制事件  
document.onkeydown =function (num)\{  
//定义一个变量接受键值  
var keycode =num.keyCode;  
switch (keycode)\{  
case 37:  
dx-=3;  
break;  
case 38:  
dy-=3;  
break;  
case 39:  
dx+=3;  
break;  
case 40:  
dy+=3;  
break;  
\}  
//创建div对象修改其css  
var div\_obj =document.getElementById("div1");  
div\_obj.style.position="absolute";  
div\_obj.style.top=dy+"px";  
div\_obj.style.left=dx+"px";   
\}   
\}  
  
</script>  
</head>  
<body>  
<div id="div1"></div>  
</body>  
</html>

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript经典案例：键盘控制元素移动

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

淡淡的烟草味﹌/ 2022年12月23日 12:25/ 0 赞/ 217 阅读

相关单片机零基础入门（5）：实现独立按键控制Led灯

单片机零基础入门（5）：实现独立按键控制Led灯一、需求如下：二、需求分析：三、源代码：四、解释： ------------------

太过爱你忘了你带给我的痛/ 2022年10月19日 14:58/ 0 赞/ 307 阅读

相关 html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...

本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动。分享给大家供大家参考，具体如下： 1. 盒子跟着鼠标移动 content="width=device-wid

分手后的思念是犯贱/ 2022年10月09日 02:54/ 0 赞/ 239 阅读

相关 javascript--键值或按钮控制div移动、轮播

1、在屏幕添加四个按钮，上下左右，来控制一个div的移动 > > > <!DOCTYPE html> > <html lang="en"> >

清疚/ 2022年08月23日 09:58/ 0 赞/ 233 阅读

相关 javascript入门基础小案例-----按键盘的方向键来控制块的移动z注释：

这个小例子中应注意的是再次修改快的属性值： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

r囧r小猫/ 2022年08月21日 08:58/ 0 赞/ 6 阅读

相关 android对多物理按键，方向键的支持

声明：这里只是做个笔记，如有高见，请多指教！现在的android手机多是触屏的，对实体按键的支持仅限home，menu，volumeup，volumedown，p

桃扇骨/ 2022年08月21日 04:11/ 0 赞/ 29 阅读

相关 .net 获取按键信息(方向键不能触发 keydown 事件)

有三个事件可以用于读取按键:KeyPress、KeyDown和KeyUp。当用户按下一个键并松开时，这三个事件的发生顺序是：KeyDown－KeyPress－KeyUp。

川长思鸟来/ 2022年06月11日 01:44/ 0 赞/ 410 阅读

相关移动智能电视之焦点控制（按键事件）

原文：[http://blog.csdn.net/sk719887916/article/details/44781475][http_blog.csdn.net_sk719

我就是我/ 2022年06月01日 09:42/ 0 赞/ 168 阅读

相关 JavaScript 语句、注释和代码块

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] [JavaScript 语句][JavaScript]

缺乏、安全感/ 2022年01月13日 23:55/ 0 赞/ 716 阅读

相关 mac 方向键调整_如何调整Mac方向键的速度

![mac 方向键调整][mac] mac 方向键调整 ![macOS Logo][] Windows users moving to macOS will notice

阳光穿透心脏的1/2处/ 2021年07月27日 00:13/ 0 赞/ 971 阅读