教你如何实现一个页面自动打字效果
前言： 最近在写一个类似于 windows 启动页的项目，不知道大家是否还记的 windows 很经典的小光标加载页面，我又稍微改造了一下效果如下：
一. 光标闪烁效果的实现
tips： 在这里我们使用了 UnoCSS，如果你不清楚 UnoCSS 的使用方法，那你可以点击下面这篇文章。
🫱 🎁手把手教你创建自己的代码仓库）
- 首先准备一块黑色的背景。
- 其实光标的样式非常非常简单，仅仅只需要你创建一个宽高合适的
div，然后创建一个底部的border效果即可。
下面应该是你目前的效果。
- 现在需要清楚的知道，这个白块的展示其实就是我们控制展示这个
div的border的显示还是隐藏。那么现在我们的思路就很清晰了，所以这里我们只需要写一个变量来动态的切换这个border值即可。
- 现在你的页面效果应该是漆黑一片，那交给谁来动态的切换这个状态呢？这里其实很简单，当页面挂载的时候，我们只需要开启一个定时器来动态切换即可。
这时候我们其实就能看到一丢丢效果了:
二. 自动打字效果的实现
- 首先我们应该明确一个概念，我们目前要做的事很简单，只需要在百块
div的前面插入文字其实就是在向后推白块。
所以白块的移动是我们无需关心的，我们仅仅只需要去处理如何插入字体的问题。 - 这里我们先准备一个常量来书写一段字符串文字，然后还需要给准备放文字的
div打上 ref 为后面的工作做准备，之后我们需要用到它身上相关的属性。
- 接下来我们要编写一个函数去处理这个问题，名字起的就随意点吧，就叫做
autoPrint。
- 这里我们仍需要开启一个循环定时器去控制，因为我们无法得知文字具体有多少，不考虑使用
setTimeout。
- 还需要准备两个变量，来存放接下来我们要处理的文字信息。
- 下面代码的思路就比较简单了，其实就是调用了
substring方法来一直切割获取下一个字符串的值。substring本身也是不改变原字符串的，所以我们只需要控制index就可以很轻松的获取到最后的值。
效果如下：
- 最后别忘了在合适的时机清除这个定时器。
三. 更优雅的实现小方块闪烁
更新于 2023/02/22
- 在写上面的代码之前我没有考虑文字过长的问题，导致小光标不会换行的问题。
- 今天更新一下，修复这个 bug。
- 我们删除上面之前控制
border的显示与否而展示的小光标样式。
- 在放置文字的
div添加一个伪元素来实现这个效果，更加简洁一点。
- 并且使用动画来替换之前的
flicker。
四. 源码
<script>
//tips: automatic printing welcome words.
function autoPrintText(text: string) {
let _str = ""
let _index = 0
const _timerID = window.setInterval(() => {
if (!textAreas.value) return
if (_index > text.length - 1) {
clearInterval(_timerID)
return
}
_str = _str + text.substring(_index, _index + 1)
textAreas.value!.innerText = _str
_index++
}, printSpeed)
}
</script>
<template>
<div v-if="isFlicker" class="w-full h-full">
<div class="text-box w-fit">
<span ref="textAreas" class="text-1.8rem font-600"></span>
</div>
</template>
<style scoped>
.text-box::after {
display: inline-block;
content: "";
width: 2rem;
vertical-align: text-bottom;
border-bottom: 3px solid white;
margin-left: 8px;
animation: flicker 0.5s linear infinite;
}
@keyframes flicker {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
预告
最近在实现一个 window 的全套 UI ，PC 和移动端的效果是完全自适应的，两者有两套 UI 。
我会在本周更新拖拽这个经典面试题的实现，仍会使用费曼学习法通俗易懂的讲解。如果你有兴趣，不妨保持关注。🎁
作者：韩振方
来源：juejin.cn/post/7200773486796914725
来源：juejin.cn/post/7200773486796914725
