5

これは私のコードです:

<font color=green>
     14:00
</font><br>
<font color=green>
     14:30
</font><br>
<font color=green>
     15:00
</font><br>
........

しばらくしてからすべてのテキストの色 (赤) を変更するにはどうすればよいですか?

私はこのコードを試しましたが、明らかに機能しません( onLoadbody/imgタグのみです):

<font color=green onLoad="setTimeout('this.style.color=red',xxx-seconds);">
     14:00
</font><br>

助言がありますか？

採用されたソリューション (minitech のおかげ):

<style>
    @keyframes change {
        from { color: green }
        to   { color: red }
    }
</style>

<span style='animation: change (number-of-seconds)s step-end both;'>
    14:30
</span>
<span style='animation: change (number-of-seconds)s step-end both;'>
    15:00
</span>
.............
4

3 に答える 3

19

これには CSS アニメーションを使用できます。

font {
    animation: change 3s step-end both;
}

@keyframes change {
    from { color: green }
    to   { color: red }
}

ライブデモ: http://jsfiddle.net/simevidas/7ZrtQ/

上記のコードでは、遅延は によって定義され、3sこれは 3 秒を表します。

ところで、ページの読み込み時にタイマーを実行させたくないが、代わりに後続のイベント (ユーザーのクリックなど) でトリガーさせたい場合は、CSS クラスでアニメーションを定義し、それを追加するだけです。クラスを後で JavaScript を使用して要素に追加し、効果をトリガーします。

ライブデモ: http://jsfiddle.net/simevidas/7ZrtQ/3/

ここに画像の説明を入力

于 2013-06-26T13:15:43.400 に答える
7

このようなもの：

setTimeout(function(){
    document.getElementsByTagName("p")[0].style.color = "#cccccc";
},3000);

getElementsByTagNameは要素の配列を返すため、配列のカウントが 0 から始まるため、最初の要素を<p>で選択します。[0]

getElementsByTagNameパーツを<span>タグに変更する必要がある場合があります。あるいは、 がありgetElementByIdます。

getElementsByClassName

または、各要素を同じクラスでターゲットにしたい場合は、次のようにすることができます。

function targetGroup(className){
    // loop throgh the elements
    var elemArray = document.getElementsByClassName(className);
    for(var i = 0; i < elemArray.length; i++){
        elemArray[i].style.color = "#ffff00";
    }
}

setTimeout(function(){
    targetGroup('foo'); // this is the class name you are targetting.
},2000);

HTML は次のようになります。

<span class="foo">bar</span>
<span class="foo">bar</span>
<span class="foo">bar</span>
<span class="foo">bar</span>
<span class="foo">bar</span>
<span class="foo">bar</span>

このページの例から変更されたコード: http://www.developphp.com/view_lesson.php?v=881

于 2013-06-26T12:50:01.727 に答える
3

fontタグを使用せず、代わりにタグを使用することをお勧めしspanます。JSFiddleの実際の例を次に示します。

HTML

<span id="text">text</span>

JavaScript

var text = document.getElementById('text');
text.addEventListener("load", init(), false);

function changeColor() {
    text.style.color = "#F00";
}

function init() {
    setTimeout(changeColor, 3000);
}

以下は、コードで使用した各 JavaScript 関数の簡単な説明です。

getElementById

その によって DOM 要素への参照を返しますID。
この機能の詳細については、こちら
を参照してください。代替機能については、この URLを確認してください

私の例では、タグ'text'の である を渡しました。IDSPAN

addEventListener

listener指定された を登録します。EventTargetこれは、 をサポートする任意のオブジェクトにすることができますevents。
この機能の詳細については、こちらを参照してください。

私の例では、イベントで呼び出されるオブジェクトに登録init() listenerしました。textload

setTimeout

指定された遅延の後に関数を呼び出すか、コード スニペットを実行します。
この機能の詳細については、こちらを参照してください。

私の例では、changeColor()関数を引数として渡したので、3 秒の遅延後に呼び出されます (注:遅延はミリ秒単位です)。

したがって、ここに最終プロセスがあります。

  1. 要素が読み込まれました
  2. init()関数が呼び出されました
  3. 「setTimeout()」関数が呼び出されました
  4. 「changeColor()」関数は 3 秒後に呼び出されました
  5. 要素の色が変更されました
于 2013-06-26T12:49:30.427 に答える