<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{width: 100px;height: 100px;background-color: orange;position:absolute;left: 400px;top: 400px;}
</style>
</head>
<body>
<button id="upBn">上</button>
<button id="leftBn">左</button>
<button id="downBn">下</button>
<button id="rightBn">右</button>
<div id="div0"></div>
<script>
var upBn=document.getElementById("upBn");
var leftBn=document.getElementById("leftBn");
var rightBn=document.getElementById("rightBn");
var downBn=document.getElementById("downBn");
var div=document.getElementById("div0");
var speed=10;
div.lefts=400;
div.tops=400;
upBn.addEventListener("click",clickHandle);
leftBn.addEventListener("click",clickHandle);
rightBn.addEventListener("click",clickHandle);
downBn.addEventListener("click",clickHandle);
function clickHandle(){
switch(this){
case upBn:
div.tops-=speed;
break;
case downBn:
div.tops+=speed;
break;
case leftBn:
div.lefts-=speed;
break;
case rightBn:
div.lefts+=speed;
break;
}
div.style.left=div.lefts+"px";
div.style.top=div.tops+"px";
}
</script>
</body>
</html>
运行结果
来源：CSDN
作者：你知道歌谣吗？
链接：https://blog.csdn.net/weixin_43392489/article/details/104047879