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

学习使用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>

你可能感兴趣的:(Html,Javascript,html,javascript,学习)