发生什么：当我按下空格键时，球向上移动并停止;再次按下时，球向下移动。
我需要什么：当我按下空格键时，球应该向上移动然后向下移动！
我想通过一次单击两次重复此功能...它看起来很简单;我尝试在按下空格按钮时循环两次，但它没有按预期工作。有什么建议吗？
var body = document.getElementById('body');
var basketball = document.getElementById('basketball');
var x = 0;
var y = 0;
var counter = 0;
var inc = Math.PI / 100 ;
body.addEventListener('keydown',function(e){
var ek = e.which;
if(ek==32){
for( var i = 0; i<=1 ;i+=0.01){
x+=i;
y+= Math.sin( counter );
counter+=inc;
basketball.style.left=x;
basketball.style.bottom=y;
}
}
});*
{
transition: all 1s;
}
#basketball
{
width: 75px;
position: absolute;
bottom: 0;
left: 10;
}<html>
<head>
<link rel="stylesheet" href="css/index_style.css">
<title>Basket</title>
</head>
<body id="body">
<img src="https://thumbs.dreamstime.com/b/basketball-ball-transparent-checkered-background-realistic-vector-illustration-91566559.jpg" id="basketball">
<script src="js/mine.js"></script>
</body>
</html>试试这个(函数调用自己(：
var body = document.getElementById('body');
var basketball = document.getElementById('basketball');
var x = 0;
var y = 0;
var counter = 0;
var inc = Math.PI / 100 ;
function bounce(e, norecall){
var ek = e.which;
console.log('keydown');
if(ek==32){
for( var i = 0; i<=1 ;i+=0.01){
x+=i;
y+= Math.sin( counter );
counter+=inc;
basketball.style.left=x;
basketball.style.bottom=y;
}
}
if (!norecall) { //only runs the first time (when norecall == undefined)
bounce(e, true)
}
}
body.addEventListener('keydown',bounce); //call bounce on keypress*
{
transition: all 1s;
}
#basketball
{
width: 75px;
position: absolute;
bottom: 0;
left: 10;
}<html>
<head>
<link rel="stylesheet" href="css/index_style.css">
<title>Basket</title>
</head>
<body id="body">
<img src="https://thumbs.dreamstime.com/b/basketball-ball-transparent-checkered-background-realistic-vector-illustration-91566559.jpg" id="basketball">
<script src="js/mine.js"></script>
</body>
</html>这样做的是调用bounce函数，而 norecallundefined. 然后!norecalltrue，所以函数调用自己，这次norecall被true，所以函数不会再次被调用，因此模仿鼠标被按下两次，这解决了问题。
不需要循环之类的东西，你可以使用 css 并添加一个将bottom从 0 更改的类，并在一段时间后使用setTimeout将其删除(您需要单击示例，以便它获得焦点和关键事件(。
var body = document.getElementById('body');
var basketball = document.getElementById('basketball');
body.addEventListener('keydown',function(e){
basketball.classList.add('up');
setTimeout(function(){
basketball.classList.remove('up');
}, 300);
});#basketball
{
transition: all 1s;
width: 75px;
position: absolute;
bottom: 0;
left: 10;
}
#basketball.up {
bottom: 25px;
}<html>
<head>
<link rel="stylesheet" href="css/index_style.css">
<title>Basket</title>
</head>
<body id="body">
<img src="https://thumbs.dreamstime.com/b/basketball-ball-transparent-checkered-background-realistic-vector-illustration-91566559.jpg" id="basketball">
<script src="js/mine.js"></script>
</body>
</html>