五分钟实现一个chatGPT打字效果

由于chatGPT最近大火，甲方爸爸觉得这样的打字效果很酷，必须要在项目中安排一下，所以动手实现了这个效果

打字状态分析

1. 
   
2. loading - 在等待打字内容的时候光标会一直显示且闪烁
   
3. tyeing - 在打字中光标会显示但不闪烁
   
4. 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]

}

效果预览