0

他のすべての文字の色を交互に変えて、テキストをアニメーション化しようとしています。私のコードは、それを一方向にスタイリングする限り機能していsetTimeoutますが、テキストの色を交互にするために再度呼び出すことはありません。

問題は、グローバル変数をカウンターとして使用しているようです。これは、私が見落としている単純な問題である可能性があります。

何か案は？ここに私のJavaScriptコードがあります:

var num = 0;
function animateText(){
    var str = "";
    var title = document.getElementById("title").innerHTML;

    for(var i = 0; i < title.length; i++){
        if(num % 2 == 0){
            if(i % 2 == 0){
                str += '<span style = "color: silver;">' + title.charAt(i) + '</span>';
            } else {
                str += title.charAt(i) + "";
            }
        } else {
            if(i % 2 != 0) {
                str += '<span style = "color: silver;">' + title.charAt(i) + '</span>';
            } else {
                str += title.charAt(i) = "";
            }
        }
    }

    document.getElementById("title").innerHTML = str;
    num++;

    if(num == 10) 
        num = 0;

    setTimeout("animateText()", 500);

}
4

3 に答える 3

3

Jonathan が指摘するタイプミスは別として、あなたのロジックには欠陥があるようです。初めてこの関数を使用すると、最初の文字列が取得され、さまざまな<span>タグを含む HTML が作成されます。次回関数を使用すると、DOM 要素から innerHTML を取得し、それが単なる文字列であるかのように再び処理を開始しますが、今回はすべてのタグが含まれている以前の HTML であり、元の文字列ではありません。元の文字列を変更せずにどこかに保存する必要があるため、毎回以前にフォーマットされた HTML に基づいて作成するのではなく、関数を介して毎回テキスト文字列から始めることができます。

于 2012-04-09T06:01:38.573 に答える
2

構文エラー/タイプミスがあります：

str += title.charAt(i) = "";
//                     ^

JavaScriptコンソールが教えてくれたように、これは違法な割り当てです。

ReferenceError: Invalid left-hand side in assignment

ただし、setTimeout文字列ではなく関数参照を渡すこともできます。

setTimeout(animateText, 500);

これにより、内部がスキップevalされ、タイムアウトで「グローバル」以外のスコープで定義された関数を使用できるようになります。

于 2012-04-09T05:46:21.287 に答える
0

グローバル変数は問題ありません

コードのこの行に構文があります

str += title.charAt(i) = "";

これは有効な割り当てではありません

于 2012-04-09T06:07:52.233 に答える