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;
}

それを修正したら、うまくいきました。

アドバイスの言葉 - このようなループに 2 番目の条件を入れて、何らかの理由でアニメーションが失敗した場合に無限ループに陥らないようにします。たとえば、これを行った可能性があります。

(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 に答える