手把手教你：CSS + JS实现文本交替

前言

继上一篇有关不同的文本编辑的文章之后，这次文本交替效果来了。在这里，我将文本交替定义为在某一段时间内循环执行交替。看到这个，防抖节流这个概念是不是在大脑一闪而过。因为函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。从某种意义上讲，确实是一个道理。整体实现用到了setInterval函数。

大致效果如下：

效果展示

• 代码块部分

接下来就来教大家如何实现这个简单的Demo。

实现思路及过程

首先在Html处添加基本的内容，如下所示:

 <h2 id="text">
        Be 
        <span style="display:initial;">Strong</span>
        <span>Creative</span>
        <span>Charming</span>
        <span>Lively</span>
        <span>Cool</span>
        <span>Cheerful</span>
    </h2>

其次开始进行Css部分的编写。Css部分很简单，因为在这个Demo中，最关键的是Js部分。对样式只需要进行基本的尺寸大小，颜色以及水平垂直居中的处理即可。但是在Css中也有一段关键代码，即display: none，作用是将文本隐藏。通俗点理解就是，它在此处的作用是在需要的时候展示出来，不需要的时候则隐藏起来。

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}
h2{
    position: relative;
    font-size: 6em;
    color: #444;
    width: 80%;
}
h2 span{
    color: skyblue;
    display: none;
}

现在来到最关键的Js部分。Js代码如下：

 <script>
        let text = document.getElementById('text')
        let word = text.getElementsByTagName('span')
        let i = 0
        function roate(){
            word[i].style = 'none'
            i = (i+1)%word.length
            word[i].style.display = 'initial'
        }
        setInterval(roate,1000)
    </script>

document.getElementById('text')代表的是获取id名为“text”的元素。getElementsByTagName()方法可返回带有指定标签名的对象的集合，在此处则表示返回带有“span”标签的元素集合，并由word表示。

在Js部分，编写了一个名为roate的函数。用最简单的话来解释这个函数的作用就是，对每个word做标记，到了哪个word就让这个word的style不变为none，解除隐藏（因为最初状态是none，是隐藏状态）。最后通过setInterval函数来循环执行roate函数。

这样就算是将效果实现了出来。

代码块

总结

整体实现起来十分容易，理解起来也比较轻松。相关代码块就附在上面，大家可以去多尝试尝试，这样更有利于理解。