时间戳

首页 > 解决方案 > 如何使用 HTML/JS 循环更改文本

javascript - 如何使用 HTML/JS 循环更改文本

问题描述

这是我找到的代码：

<script>
    var example = ['A', 'B', 'C', 'D'];

    textSequence(0);
    function textSequence(i) {

        if (example.length > i) {
            setTimeout(function() {
                document.getElementById("sequence").innerHTML = example[i];
                textSequence(++i);
            }, 3000); // 3 seconds (in milliseconds)

        } else if (example.length == i) { // Loop
            textSequence(0);
        }

    }
</script>

和显示序列的 div

<div id="sequence"></div>

我想改变的是：

  1. 在页面加载时立即显示第一个文本，而不是 3 秒后显示。
  2. 进行滑入/滑出效果过渡

我怎样才能做到这一点？

标签： javascripthtml

解决方案

我稍微更改了您的代码，所以它会立即开始。对于滑入和滑出，您最好使用 jQuery，而不是纯 Javascript。

<script>
    var example = ['A', 'B', 'C', 'D'];
    var gFirstTime = true;
    textSequence(0);


    function textSequence(i) {
        if (gFirstTime) {
            timeToWait = 0;
            gFirstTime = false;
        }
        else {
            timeToWait = 3000;
        }
        if (example.length > i) {
            setTimeout(function () {
                var sequenceDiv = document.getElementById("sequence");                                                          
                sequenceDiv.innerHTML = example[i];                    
                textSequence(++i);
            }, timeToWait); // 3 seconds (in milliseconds)

        } else if (example.length == i) { // Loop
            textSequence(0);
        }

    }
</script>

推荐阅读