Question

我试着让div以指数速度向下移动。我的问题是我的函数中使用的速度值似乎无法正常工作。

我是javascript的初学者，我想我没有把增量放在正确的位置。

<title>test2</title>
<style type="text/css">
#ball {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background:red;
    width:50px;
    height:50px;
    position:absolute;
}
</style>
</head>

<body>

<div id="container">

    <div id="ball" style="top:200px;left:200px;"></div>

    <script>
        var speed=0;
        function bounce(speed) {
            speed++;
            var ball = document.getElementById("ball");
            var topValue = parseInt(ball.style.top, 10);
            ball.style.top = (topValue + speed) + "px";
            if (topValue >= 300) {
                clearInterval(interval);
            }
        }
        var interval = setInterval(function() {bounce(speed)}, 10);

    </script>

</div>

Answer 1

您正在错误地使用闭包。 speed未更改，因为您将其用作函数参数，并且它是基本类型Number。尝试下一步：

    var speed=0;
    function bounce() {
        speed++;
        var ball = document.getElementById("ball");
        var topValue = parseInt(ball.style.top, 10);
        ball.style.top = (topValue + speed) + "px";
        if (topValue >= 300) {
            clearInterval(interval);
        }
    }
    var interval = setInterval(function() {bounce()}, 10);

最后一行可以替换为：var interval = setInterval(bounce, 10);

指数绝对定位轴值

1 个答案: