JS小案例-文本切换效果

最新推荐文章于 2022-10-15 01:58:46 发布

weixin_46370867

最新推荐文章于 2022-10-15 01:58:46 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46370867/article/details/110128497

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

下面是一个文本切换效果的小案例，希望可以可以帮助到有需要的小伙伴

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本切换效果</title>
</head>
<style>
    .container {
        width: 800px;
        height: 300px;
        background-color: cornflowerblue;
        border: #333;
        box-shadow: 2px 2px 10px #000;

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        font-family: sans-serif;
        font-size: 50px;
        font-weight: 300;
        text-align: center;
    }
</style>

<body>
    <div id="speak" class="container">其实，我想对你说.......</div>

    <script>
        // 创建一个数组 -- 存储要所的话
        var arr = ['你真的很棒', '我好喜欢你', '你一定会成为你想成为的你']
        // 计数器
        var index = 0;
        // 1.获取<div>元素节点
        var speak = document.getElementById('speak');
        // 为<div>元素节点绑定事件
        speak.onclick = d = function () {
            if (index < arr.length) {
                // 2.根据<div>元素节点获取其文本子节点
                var textNode = speak.firstChild;
                // 3. 
                // a. 创建一个新的文本节点，进行替换
                // b. 对文本节点中的文本内容进行修改
                if (textNode.nodeType === 3) {
                    textNode.nodeValue = arr[index];
                }
                index++;

            }
        }

    </script>
</body>

</html>