前端打字效果

原创已于 2024-08-22 09:56:33 修改 · 300 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#前端 #打字效果 #一字一字显示答案动效
于 2024-08-22 09:18:44 首次发布
页面效果链接，点击查看https://live.csdn.net/v/419208?spm=1001.2014.3001.5501
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字机效果</title>
    <style>
        .flex {
            display: flex;
        }

        .flex-1 {
            flex: 1;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <div v-for="(item, index) in clientpreferenceVOListCopy">
            <div class="flex">
                <div>
                    {{ item.type }}
                </div>:
                <div class="flex-1" v-html="item.summary"></div>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                clientpreferenceVOList: [
                    { "type": "意外", "summary": "虽然客户目前为赋闲大众，但生活中总会有意外发生。根据中国保险监督管理委员会的数据，2019年中国交通事故死亡人数约为3.7万人，平均每天有877人因交通事故而丧生。意外风险不仅包括交通事故，还包括家庭意外、职业意外等。考虑到客户目前为单身贵族，可能需要承担更多的家庭责任，因此意外风险不容忽视。购买意外险可以为客户提供意外伤害的保障，确保在意外发生时能够得到及时的经济支持。" },
                    { "type": "医疗", "summary": "客户目前无社保，意味着在医疗方面可能会面临较大的经济压力。根据中国保险监督管理委员会的数据，2019年中国医疗费用总支出约为6.5万亿元，其中个人自付比例约为20%，而客户作为单身贵族，可能需要承担更多的自付费用。医疗风险不仅包括治疗费用，还包括药物费用、检查费用、住院费用等。因此，购买医疗保险对于客户来说至关重要，可以有效减轻因疾病带来的经济负担。" },
                    { "type": "重疾", "summary": "客户目前为36岁-45岁，处于单身贵族阶段，无家庭负担，但关注点为医疗健康。这意味着客户可能面临较高的重疾风险。根据统计数据，中国新发恶性肿瘤的发病数每年都在增加，且发病年龄呈下降趋势，35-44岁组发病人数占全部恶性肿瘤发病人数的40%，且发病与工作压力、生活压力、环境污染、不良生活习惯等密切相关。考虑到客户目前的职业为赋闲大众，生活压力可能较大，因此重疾风险不容忽视。建议客户购买重疾险，以减轻因重疾带来的经济负担，保障自己能够得到及时和有效的治疗。" }
                ],
                clientpreferenceVOListCopy: [],
                index: 0,
                ind: 0,
                timer: null
            },
            mounted() {
                this.typeWriter();
            },
            methods: {
                typeWriter() {
                    const item = this.clientpreferenceVOList[this.ind];
                    let o = { type: item.type, summary: '' };
                    this.clientpreferenceVOListCopy.push(o);
                    console.log('this.clientpreferenceVOListCopy', this.clientpreferenceVOListCopy);
                    this.timer = setInterval(() => {
                        this.dealO();
                    }, 50);
                },
                dealO() {
                    console.log('this.index', this.index, this.clientpreferenceVOList[this.ind].summary.charAt(this.index));
                    if (this.index < this.clientpreferenceVOList[this.ind].summary.length) {
                        // 将当前字符添加到文本元素中
                        this.clientpreferenceVOListCopy[this.ind].summary += this.clientpreferenceVOList[this.ind].summary.charAt(this.index);
                        this.index++;
                    } else {
                        // 设置延迟后继续执行函数
                        clearInterval(this.timer);
                        this.timer = null;
                        this.index = 0;
                        this.ind++;
                        if (this.ind <= 2) {
                            this.typeWriter();
                        }
                    }
                }
            },
            beforeDestroy() {
                // 清除定时器
                clearInterval(this.timer);
                this.timer = null;
            }
        })
    </script>

</body>

</html>