前端打字效果
页面效果链接，点击查看
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>