HTML DOM Event 键盘事件
开发工具与关键技术： Dw、JS
作者：
撰写时间：2021/5/8
首先先了解一下JS JS的全称是 JavaScript
JavaScript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为
想要用键盘事件就必须使用event事件
首先将布局完成好
可以直接做一个小方框，这里的方框只是为了方便调用
个人建议套用一个图片就好
但是无论是哪一个都需要加入定位属性
如图
将图片赋予ID
加入加载事件
window.οnlοad=function()
然后赋予值 并且获取图片
var img=document.getElementById("div")
这里获取是ID为div的img标签
document.οnkeydοwn=function(event)
获取之后再利用event单位嵌套出switch 再调用输入事件
switch(event.keyCode)
语句为
case 37:
这里的37指的是键盘码
部分键盘码
img.style.left=box.offsetLeft-20+"px";
使用元素向左边移动20px
offsetLeft 返回元素的水平偏移位置
img.style.left=box.offsetLeft-20+"px";
使用元素向上边移动20px
效果如图
可以看到图片的位置不同 参照物为头上的网页
只要进行小部分的修改就 可以做到自由的上下左右了
源代码分享
|
窗体顶端 窗体底端 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>82JavaScript键盘事件_键盘移动div</title>
<style>
img{
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<img src="../../../../../Pictures/2.jpg" alt="" id="div">
（图片）
<script>
window.οnlοad=function(){
var box=document.getElementById("div")
document.οnkeydοwn=function(event){
var speed=20;
switch(event.keyCode){
case 37:
box.style.left=box.offsetLeft-20+"px";
break;
case 38:
box.style.top=box.offsetTop-20+"px";
break;
case 39:
box.style.left=box.offsetLeft+20+"px";
break;
case 40:
box.style.top=box.offsetTop+20+"px";
break;
default:
break;
}
}
}
</script>
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
