简单实现打字机效果

实现的代码比较简单，主要是这种思路。
看下效果

html

<div class="show" style="font-size: 12px;"></div>

闪动的光标效果用css 实现

        .show {
            font-size: 12px;
            white-space: pre-line;
        }
        .show:after {
            content: "_";
            color: #999;
            animation: kkk 1.5s infinite;
        }
        @keyframes kkk {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

pause()用来达到停顿效果；
type()拆分字符并渲染到div里

    function pause() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve()
            }, Math.random() * 100)
        })
    }
    async function type() {
        let show = document.querySelector('.show');
        let _a ='';
        let _ss = '简单代码实现打字机效果，打字机效果，打字机效果，打字机效果，打字机效果，打字机效果，打字机效果，打字机效果，打字机效果，打字机效果，打字机效果，打字机效果，打字机效果，打字机效果，打字机效果'
        for (let i = 0; i < _ss.length; i++) {
            _a += _ss[i];
            show.textContent = _a;
            await pause();
        }
    }
    type();