Question

问题已得到解答。

注意：我试图将此输出到网页我只使用控制台作为参考。我已经设置了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();

Answer 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();

Demo

不要忘记更新elementToReceiveWord的ID选择器以选择页面中的元素。

原始代码出现了一些错误：

r_randomtext / r_text var name mismatches;
在显示文本之前不绘制新的随机值;
Math.random（）* x;
计时器是10秒，而不是请求的20秒。

改进：

使用文字数组语法（更简洁，更简洁，更适合解释器优化）。
内联一些数学运算。

我也对元素的文本属性进行了特征检测。所有现代浏览器都支持textContent这是W3C标准，我使用innerText作为旧IE的后备。 Chrome支持这两种属性，Firefox仅支持textContent，IE＆lt; 9不支持textContent（因此innerText后备版。）

如果您不关心旧版IE，则可以删除该支票，只需使用element.textContent = ...即可。

运行循环的计时器

1 个答案: