1

帮助！我不知道这里出了什么问题，我正在关注来自 Tuts+ 的教程视频 代码是准确的，但蓝色框没有向左侧显示动画。

当我在 moveBox 函数中放置警报时，我在控制台中看到警报一遍又一遍地触发相同的消息。

这是我的测试链接：

> 尝试使用 Javascript 动画左蓝色框 <

这是视频的截图：

在此处输入图像描述

这是我的代码：

(function() {

var speed   = 10,       
    moveBox = function() {
        var el = document.getElementById("box"),
            i = 0,
            left   = el.offsetLeft,
            moveBy = 3;
            //console.log("moveBox executed " +(i+1)+ " times");

            el.style.left = left + moveBy + "px";

        if (left > 399) {
            clearTimeout(timer);
        }
    };

var timer = setInterval(moveBox, speed);

}());

HTML：

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<title>JavaScript 101 : Window Object</title>
<style>
    #box {
        position: abosolute;
        height: 100px;
        left: 50px;
        top: 50px;
        width: 100px;
        background-color: Blue;
    }
</style>
</head>

<body>

<div id="box"></div>
<script src="js/animation.js"></script>

4

1 回答 1

2

您在定位中拼错了“绝对”：

#box {
    position: absolute;   // Your mispelling here
    height: 100px;
    left: 50px;
    top: 50px;
    width: 100px;
    background-color: Blue;
}

一旦我解决了这个问题，它就工作得很好。

一个忠告——在这样的循环中放置第二个条件，这样如果动画由于某种原因失败，你就不会陷入无限循环。例如，您可能已经这样做了：

(function() {

var maxTimes = 1000;
var loopTimes = 0;
var speed = 10,       
moveBox = function() {
    var el = document.getElementById("box"),
        i = 0,
        left   = el.offsetLeft,
        moveBy = 3;
        //console.log("moveBox executed " +(i+1)+ " times");

     el.style.left = left + moveBy + "px";

     loopTimes += 1;
     if (left > 399 || loopTimes > maxTimes) {
         clearTimeout(timer);
     }
};

var timer = setInterval(moveBox, speed);

}());
于 2012-08-13T18:23:19.983 回答