开发工具与关键技术： JS
作者：nd
撰写时间：2021/5/27
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>
</body>
</html>
1146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
