五分钟实现一个chatGPT打字效果
·
Yin灏
由于 chatGPT 最近大火，甲方爸爸觉得这样的打字效果很酷，必须要在项目中安排一下，所以动手实现了这个效果
打字状态分析
- loading - 在等待打字内容的时候光标会一直显示且闪烁
- tyeing - 在打字中光标会显示但不闪烁
- end - 在打字结束后光标隐藏
样式
/* 光标字符显示 */
.typing::after {
content: "▌";
}
/* 光标闪烁动画 */
.blinker::after {
animation: blinker 1s step-end infinite;
}
@keyframes blinker {
0% {
visibility: visible;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
内容打印功能实现
结合定时器和光标样式设置
/**
* @description:
* @param {HTMLElement} dom - 打印内容的dom
* @param {string} content - 打印文本内容
* @param {number} speed - 打印速度
* @return {void}
*/
function printText(dom, content, speed = 50) {
let index = 0;
setCursorStatus(dom, "typing");
let printInterval = setInterval(() => {
dom.innerText += content[index];
index++;
if (index >= content.length) {
setCursorStatus(dom, "end");
clearInterval(printInterval);
}
}, speed);
}
/**
* @description: 设置dom的光标状态
* @param {HTMLElement} dom - 打印内容的dom
* @param {"loading"|"typing"|"end"} status - 打印状态
* @return {void}
*/
function setCursorStatus(dom, status) {
const classList = {
loading: "typing blinker",
typing: "typing",
end: "",
};
dom.className = classList[status];
}