学习使用html和js实现打字机效果代码整理，一个字一个字显示出来

徊忆羽菲

已于 2023-12-04 16:52:15 修改

阅读量2.2k

点赞数 17

分类专栏： Html Javascript 文章标签： html javascript 学习

于 2023-12-04 16:41:59 首次发布

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/134788098

版权

Html 同时被 2 个专栏收录

248 篇文章 8 订阅

订阅专栏

Javascript

231 篇文章 5 订阅

订阅专栏

学习使用html和js实现打字机效果代码整理，一个字一个字显示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习使用html和js实现打字机效果代码整理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(43, 52, 82);
        }

        .text {
            font-family: 'fangsong';
            display: inline-block;
            position: relative;
            font-size: 40px;
            height: 60px;
            line-height: 60px;
            color: rgb(245, 245, 245);
        }

        .text::after {
            content: '';
            position: absolute;
            right: -10px;
            top: 5px;
            height: 50px;
            width: 3px;
            background-color: #fff;
            animation: san 0.5s steps(1) infinite;
        }

        @keyframes san {
            0%, 100% {
                background-color: #fff;
            }
            50% {
                background-color: transparent;
            }

        }
    </style>
</head>
<body>
<h1>
    <span class="text"></span>
</h1>
<script>
    <!--    获取text标签-->
    const text = document.querySelector('.text');
    <!-- 定义数组，里面放上文本 -->
    const txt = ["qipa250二手车买卖面临的挑战确实很多，以下是一些可能有助于扭转局面的建议:\n" +
    "1. 提高服务质量：为客户提供更好的服务，例如更快速的车况检测、更详细的车辆描述和更高的购车体验，从而提高客户满意度和忠诚度。\n" +
    "2. 优化营销策略：尝试不同的营销策略，例如通过社交媒体、搜索引擎优化和电子邮件营销等方式来吸引更多潜在客户。\n" +
    "3. 加强团队建设：雇用更专业、更有经验和热情的员工，提高车行的专业形象和服务质量。\n" +
    "4. 降低车辆成本：尝试通过采购批量车辆来获得更好的价格，或者与其他汽车经销商或制造商合作以降低成本。\n" +
    "5. 库存管理优化：优化库存管理，尽可能减少库存积压，并通过实时监测市场趋势和价格波动来快速响应市场变化。\n" +
    "6. 寻求合作伙伴：与其他相关行业如保险、维修和保养等寻求合作伙伴关系，以提供更多的服务和扩大客户群体。\n" +
    "7. 提供优质的售后服务：为客户提供优质的售后服务，例如提供优质的维修和保养服务、及时回复客户咨询等，从而提高客户满意度和忠诚度。\n" +
    "以上这些建议可能并不适用所有情况，但是可以作为参考，希望能帮助你找到适合自己的解决方案。", "夜越黑，星星越亮。", "答案在风中飘荡。"];
    <!-- 定义当前要显示的字符串的第几个字符 -->
    var index = 0;
    <!-- 定义文本数组的下标 -->
    var xiaBiao = 0;
    <!-- 定义huan，拿来判断是要实现打字还是删除字效果，初始为真 -->

    var huan = true;

    setInterval(function () {

        if (huan) {
            <!-- 给.text标签添加字符，用.slice方法 -->
            text.innerHTML = txt[xiaBiao].slice(0, ++index);
            console.log(index);
        } else {
            <!-- 给.text标签删除字符，用.slice方法 -->
            text.innerHTML = txt[xiaBiao].slice(0, index--);
            console.log(index);
        }

        <!-- 判断当前index是否为当前字符串长度了+3了 ，+3是为了打完后多等会，多走3个啥也不做的轮回-->
        if (index == txt[xiaBiao].length + 3) {
            <!-- huan变为假，开始执行删除文字效果 -->
            huan = false;
        } else if (index < 0) {<!-- 如果删完了 -->
            <!-- index=0，huan为真，从头开始打字 -->
            index = 0;
            huan = true;
            <!-- 数组下标加1 -->
            xiaBiao++;
            if (xiaBiao >= txt.length) {
                <!-- 如果数组下标超过了，又回到0 -->
                xiaBiao = 0;
            }
        }

    }, 50);//调整显示速度

</script>
</body>
</html>

徊忆羽菲

关注

17
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
学习使用html和js实现打字机效果代码整理，一个字一个字显示出来

"7. 提供优质的售后服务：为客户提供优质的售后服务，例如提供优质的维修和保养服务、及时回复客户咨询等，从而提高客户满意度和忠诚度。"1. 提高服务质量：为客户提供更好的服务，例如更快速的车况检测、更详细的车辆描述和更高的购车体验，从而提高客户满意度和忠诚度。"3. 加强团队建设：雇用更专业、更有经验和热情的员工，提高车行的专业形象和服务质量。"qipa250二手车买卖面临的挑战确实很多，以下是一些可能有助于扭转局面的建议:\n""夜越黑，星星越亮。
复制链接

扫一扫