js之按键控制div移动

最新推荐文章于 2023-02-03 20:25:43 发布

编程小小小小小白白

最新推荐文章于 2023-02-03 20:25:43 发布

阅读量2.6k

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_67932301/article/details/124906393

版权

要求：当用户按下键盘上的上下左右键时，让div进行上下左右的移动

1.我们要找到事件源和事件事件源：键盘

事件：键盘按下事件 document.οnkeydοwn=function(){}

()里填event：是事件对象：包含本次触发事件的相关属性。方法

2.如何判断按的是哪个键：通过键值来判断

event.keyCode:键盘的键值

<script>
    document.onkeydown=function(event){
    console.log(enent.keyCode)//输出键盘的键值
}
//按键左是37 上是38 右是39 下是40
<script>

业务：当用户按下键盘上下左右键时，输出对应方向

1）用if

<scirpt>
    if(event.keyCode==37){
    console.log("左")
}else if(event.keyCode==38){
    console.log("上")
}else if(event.keyCode==39){
    console.log("右")
}else if(event.keyCode==40){
    console.log("下")
}else{
    console.log("什么都不是")
}
</script>

2）switch 可以简化代码更方便，但只适用于全等判断

格式：switch（case 值1：执行代码 break；case 值2：执行代码 break... default:执行代码 break）如果只都不符合，走default

<script>
    switch(event.keyCode){
    case 37:console.log("左")
    break;
    case 38:console.log("上")
    break;
    case 39:console.log("右")
    break;
    case 40:console.log("下")
    break;
    default:console.log("什么都不是")
    break;
}
</script>

3.给div的格式添加一个相对定位属性：position:relative;通过left 和top操作

1）如何找到当前元素的left值：

将left和top写到div的行内样式中定义一个新的变量

var left=div的id值.style.left

因为left的值本来是0px，所以输出的也是0px，但是这是一个字符串，进行数值与字符串之间的转化

parseInt()

设置样式

代码

<style>
        #box{
            width: 300px;height: 300px; background-color: #ccc; position: relative;
            
        }
    </style>
</head>
<body>
    <div id="box" style="left: 0px; top: 0px;"></div>
<script>
        var box=document.getElementById("box")
        document.onkeydown=function(event){
    switch(event.keyCode){
            case 38:
                var top=box.style.top
                var x=parseInt(top)
                var result=x-20
                box.style.top=result+"px"
            console.log("上")
             break
            case 39: 
            //找到当前元素的left值
            var left=box.style.left
             var x=parseInt(left)
            //console.log(x)
            var result=x+20
            box.style.left=result+"px"
            console.log("右") 
            break
            case 37: 
            var left=parseInt(box.style.left)
            box.style.left=left-20+"px"
            console.log("左")
             break
            case 40:
                var top=parseInt(box.style.top)
                box.style.top=top+20+"px"
            console.log("下")
             break
            default: console.log("什么都不是")
            break
        }
        }
    </script>
</body>