HTML页面某个元素内文字逐个显示加载

2023-12-14 20:33:35

HTML页面某个元素内文字逐个显示加载

文章目录

1. 函数定义

showText 函数接受三个参数:

  • elementId: 表示要加载文字的元素 id, 类型为字符串。
  • textToLoad: 表示要加载的文字内容, 类型为字符串。
  • speed: 表示加载速度, 单位为毫秒, 默认为 10 毫秒。

2. 函数实现

函数首先通过 getElementById 方法获取指定 id 的元素, 存储在 textElement 中。然后, 定义一个名为 index 的变量, 用于记录当前已加载的文字的索引。

接下来, 使用 setInterval 方法设置一个定时器, 每隔一定时间执行一次。定时器的回调函数中, 首先将 textElement 的 textContent 属性值加上要加载的文字的当前字符, 然后将 index 加 1, 表示加载下一字符。当 index 大于等于 textToLoad 的长度时, 表示所有文字都已加载完毕, 此时使用 clearInterval 方法停止定时器。

3. 示例

以下是一个简单的示例, 展示了如何使用 showText 函数加载一段文字:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>逐个显示加载文字的示例</title>
</head>
<body>
  <div id="textElement">
      loading...
  </div>
  <button onclick="showTextClick()">加载文字</button>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>       
        /**
         * 逐个显示加载函数
         * @param {string} elementId 加载内容的元素id
         * @param {string} textToLoad 加载的内容            
         * @param {number} speed 加载速度,单位：毫秒,
         */
        function showText(elementId,textToLoad,speed) {                              
            var textElement = document.getElementById(elementId);
            let index = 0; 
            if(speed == undefined || speed == null || speed == ""){
                speed = 10;
            }
            // 设置定时器，每隔一定时间逐个添加文字
            var timerId = setInterval(() => {
                textElement.textContent += textToLoad[index]; // 逐个添加文字
                index++; // 更新索引
                // 判断是否已显示完所有文字
                if (index >= textToLoad.length) {
                    clearInterval(timerId); // 停止定时器
                }
            }, speed); // 控制每个字符的加载间隔，可以根据需要调整
        }
        var  textToLoad = "运营经理职业需要具备的从业知识：  1. 运营管理知识：了解运营管理的基本概念、流程、工具和方法，包括生产、销售、财务、人力资源等方面的运营管理。 2. 数据分析能力：具备数据分析的能力，能够通过数据分析和挖掘，发现问题并提出解决方案。 3. 项目管理能力：能够有效地管理项目进度、人员调配、资源分配等方面的工作，确保项目的顺利进行。 4. 沟通能力：具备良好的沟通能力，能够与团队成员、客户、供应商等各方进行有效沟通。 5. 行业知识：了解所在行业的市场、竞争、技术等方面的知识，以便更好地进行运营管理。  职业所需技能：  1. 领导力：具备领导力技能，能够带领团队完成目标，激发团队成员的积极性和创造力。 2. 决策能力：具备决策能力，能够在复杂多变的环境中做出正确的决策。 3. 创新能力：能够根据市场和客户需求，提出新的运营思路和方法，提高运营效率和质量。 4. 团队合作能力：能够与团队成员密切合作，共同完成目标。  从业难度或工作挑战：  1. 工作压力大：运营经理需要面对较大的工作压力，包括时间紧迫、任务繁重、质量要求高等方面。 2. 竞争激烈：随着市场竞争的加剧，运营经理需要不断更新知识和技能，以应对不断变化的市场环境。 3. 跨部门沟通：需要与不同部门进行有效的沟通和协作，协调资源，确保运营目标的实现。                                                                                              以上书籍仅供参考，具体可根据个人需求和兴趣进行选择。                   　                              综上以上回答了你的问题，希望能对你有所帮助。　   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　．．．．．．．．． -----------------------------------------------------------";
        function showTextClick(){
            $('#textElement').text("");   
            showText("textElement",textToLoad,10);
        }               
    </script>     
</body>
</html>

在这个示例中, 我们创建了一个 div 元素, id 为 textElement, 用于显示加载的文字。然后, 我们添加了一个按钮, 当点击该按钮时, 会调用 showText 函数, 加载一段文字, 文字内容为 “Loading complete!”。加载速度为 100 毫秒。

运行这个示例, 当点击按钮时, 文字会逐个加载, 并在指定时间后显示完整的内容。

4. 注意事项

  • showText 函数会修改 textElement 的 textContent 属性, 因此如果需要保留原始内容, 可以考虑将原始内容存储在另外的变量中, 并在函数中使用该变量。
  • 如果要加载的字符串较大, 可能会导致性能问题。为了避免这种情况, 可以考虑将加载的文字分成多个小段, 每段包含一定数量的字符, 然后使用 setInterval 方法逐段加载。
  • 函数中使用了 setInterval 方法设置定时器, 因此可能会存在内存泄漏的问题。如果不再需要该函数, 应使用 clearInterval 方法停止定时器, 以避免内存泄漏。

5. 总结

showText 函数可以用于在网页上逐个显示加载文字, 适用于需要展示大量文字的场景。在使用该函数时, 需要注意性能问题以及内存泄漏的问题。

文章来源:https://blog.csdn.net/qq_45830276/article/details/135003042
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。