0

質問は回答済みです。

注：これをWebページに出力しようとしていますが、参照用にコンソールのみを使用しました。cssコードを設定しました。

    var r_text = ['Hi', 'Go', 'No'];
function countdown() {

    var count = 20;
    var timerId = setInterval(function() {
        count--;
        console.log(count);

        if(count == 0) {
            console.log(r_text[Math.floor( Math.random() * r_text.length )]);
            count = 20;
        }
    }, 1000);
}
countdown();
4

1 に答える 1

1 
var r_text = ['Hi', 'Go', 'No'],
    textProp = 'textContent' in document.createElement('div') ?
               'textContent' :
               'innerText',
    //update this ID selector to match an element in the page:
    elementToReceiveWord = document.getElementById('WORD'),
    seconds = 20; //timer in seconds

function countdown() {
    var count = seconds;
    var timerId = setInterval(function() {
        count--;
        console.log(count);

        if(count == 0) {
            var word = r_text[Math.floor( Math.random() * r_text.length )];
            elementToReceiveWord[textProp] = word;
            setTimeout(function() {
                  elementToReceiveWord[textProp] = '';
            }, 5000);
            count = seconds;
        }
    }, 1000);
}
countdown();

デモ

elementToReceiveWordの ID セレクターを更新して、ページ内の要素を選択することを忘れないでください。

元のコードにはいくつかの間違いがありました:

  • r_randomtext/r_text変数名の不一致。
  • テキストを表示する前に新しいランダム値を描画しません。
  • Math.random() * x; の配列の長さが間違っています。
  • タイマーは、要求された 20 秒ではなく 10 秒でした。

改良点:

  • リテラル配列構文を使用します (より簡潔で短く、インタープリターの最適化に適しています)。
  • いくつかの数学演算をインライン化しました。

要素の text プロパティにも機能検出チェックを採用しました。最新のブラウザーtextContentはすべて W3C 標準をサポートしています。私はinnerText古い IE のフォールバックとして使用しています。Chrome は両方のプロパティをサポートし、Firefox は のみをサポートしtextContent、IE<9 はサポートしませんtextContent(したがって、innerTextフォールバック)。

古い IE を気にしない場合は、そのチェックを削除してelement.textContent = ...代わりに使用することができます。

于 2013-11-14T22:26:08.640 に答える