1效果图
2html和js
<body>
<div id="ball"></div>
<script>
// 获取小球
var ball = document.getElementById('ball');
// 设置小球移动的步径
var step = 2;
// 设置定时器标志
var run = false;
// runing 计时器返回的标志
var runing;
/*
通过上下左右键控制小球在对应的方向进行移动
键按下,走;抬起,停
*/
window.onkeydown = function(e){
// 判断按下的键
// console.log(e);
// e.keyCode 返回的按键对应的数字
// 对不同的键,使用不同的移动方式
switch(e.keyCode){
// 向左移动
case 37:
moveLeft();
break;
// 向上移动
case 38:
moveTop();
break;
// 向右移动
case 39:
moveRight();
break;
// 向下移动
case 40:
moveBottom();
break;
}
}
// 当键盘抬起时停止计时器
window.onkeyup = function(){
// 清除计时器
clearInterval(runing);
// 将定时器的标志变成false
run = false;
}
// 声明向左移动的函数
function moveLeft(){
// 判断定时器是否存在
if(run){
return;
}
runing = setInterval(function(){
// 将标志设置为true
run = true;
// 获取当前值
var l = ball.offsetLeft;
ball.style.left = (l - step)+'px';
},10);
}
// 声明向右移动的函数
function moveRight(){
// 计时器叠加会造成特殊效果
// 不能持续按下时或者每一回按下时,都启动一个定时器
// 判断是否已经有了一个定时器
// 如果已经有了定时器,那么我终止
// 如果run 现在是true,不用再启动了
if(run){
return;
}
// 设置定时器
runing = setInterval(function(){
run = true;
// 获取当前值
var l = ball.offsetLeft;
ball.style.left = (l + step)+'px';
},10);
}
// 向上移动的函数
function moveTop(){
// 判断当前是否有定时器
if(run){
return;
}
// 启动定时器
runing = setInterval(function(){
// 设置已经启动的标志
run = true;
var t = ball.offsetTop;
ball.style.top = (t-step)+'px';
},10);
}
// 向下移动的函数
function moveBottom(){
// 判断当前是否有定时器
if(run){
return;
}
// 启动定时器
runing = setInterval(function(){
// 设置已经启动的标志
run = true;
var t = ball.offsetTop;
ball.style.top = (t+step)+'px';
},10);
}
</script>
</body>
3css
<head>
<meta charset="UTF-8">
<title>上下左右</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#ball {
width: 100px;
height: 100px;
background: purple;
border-radius: 50px;
position: absolute;
}
</style>
</head>
4总结
点击小键盘的上线左右 可移动小球