做网站电话沧州,网上写文章用什么软件,企业免费发布信息平台,wordpress主题 翠竹林之前看了很多文章,效果是实现了,就是没有自动换行的效果,参考了文章写了一个,先上个效果图,卡顿是因为模仿了卡顿的效果,还是很丝滑的 目录 效果图:代码如下 效果图: ; // 打字机内容let timer refany(); // 定时器let interTime ref(10); // 初始化间隔时间let interArr ref([20, 30, 10, 20, 80, 30, 15, 400, 50, 20]);let dialogueAnswer ref();//当前文本const formattedText computed(() {return dialogueAnswer.value.replace(/\n/g, br);});let e 我们并不是为了活着而活着但是我们也是为了\n 活着而活着生命本身就是一种巨大的力量我们应当敬畏生命把活着、活好当成生命追求的极致的目标让生命散发最大限度的光和热。苦难无处不在生活处处艰险我们只有在经历苦难后依然选择绽放笑容那才是真正懂得了人生的意义----余华活着;/**调用打字机,模拟获取到数据调用打字机*/function onTypewriterFun() {console.log( ~ onTypewriterFun ~ onTypewriterFun:);if (e) {answer.value e; // 打字机文本内容clearInterval(timer.value); // 清除定时器timer.value setInterval(setContent, interTime.value);}}function setContent() {if (dialogueAnswer.value.length answer.value.length) {// 说明文本已全部输出清除定时器结束执行clearInterval(timer.value);return;} else {dialogueAnswer.value answer.value.charAt(dialogueAnswer.value.length);interTime.value interArr.value[Math.floor(Math.random() * 10)];clearInterval(timer.value);timer.value setInterval(setContent, interTime.value);}}.cursor-ani {position: absolute;top: 220px;left: 40%;width: 500px;height: 500px;z-index: 999;background-color: #333;color: #ffffff;}.cursor-ani::after {content: ;position: absolute;width: 1px;height: 16px;background: #333;transform: translateX(3px) translateY(3px);animation: cursor-blinks 0.8s infinite forwards;}keyframes cursor-blinks {from {opacity: 0;}to {opacity: 1;}}
