阅读后如何保持功能活跃？ (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"

您应该会得到预期的结果。

阅读后如何保持功能活跃？ (Javascript)

How do I keep function active after it has been read? (Javascript)

javascript

animation

webpage