如何在读取后保持功能活动？ （JavaScript）的

Question

我正在用javascript制作一个简单的网页动画。这是我到目前为止所做的：

document.onkeydown = checkKey;
            function checkKey(e) {
                e = e || window.event;
                if (e.keyCode == "38") {
                    var ball=document.getElementById("ball");
                    var posup=0;
                    var speedone=setInterval(up, 0);
                    function up(){
                        if(posup==240){
                            clearInterval(speedone);
                        }else{
                            posup++;
                            ball.style.bottom=posup*2+"px";
                        }
                    }
                }else if(e.keyCode=="40"){
                    var ball=document.getElementById("ball");
                    var posdown=0;
                    var speedtwo=setInterval(down, 0);
                    function down(){
                        if(posdown==240){
                            clearInterval(speedtwo);
                        }else{
                            posdown++;
                            ball.style.top=posdown*2+"px";
                        }
                    }
                }
            }

当按下向上箭头键时，此代码应该使一个小白球向上移动，当按下向下箭头键时向下移动。它能够上下移动，但在它下降之后它无法恢复，它只能重放向下的动画。我试图将整个事物包含在一个大的父函数中，但它仍然不起作用。我想这可能是因为javascript是如何从上到下读取的，所以“up”移动代码不会再次读取。我想要一些关于如何解决这个问题的帮助和提示，并启动并运行我的程序，谢谢。

Answer 1

问题不在于JavaScript，而在于您正在使用的样式。

您正在设置ball.style.top和ball.style.bottom，结果是位置不一致，因此一个坐标胜过另一个坐标。

如果您更换

ball.style.bottom=posup*2+"px"

与

ball.style.top=480 - posup*2+"px"

你应该得到你期望的结果。