JS实现打字效果（_会闪烁）

背景

更新博客园个人博客时，突发奇想想要将子标题的入场特效做成类似Linux命令行输命令时的样式

效果网页：LanceEst - 博客园 (cnblogs.com)

思路和代码

1 <h2 id="para">Hi, I'm Lance, and welcome to my workstation :)</h2>

#para {
    width: 100%;
    text-align: center;
    /* 由于js是最后读取并执行的，所以为了视觉体验，先将句子藏起来 */
    visibility: hidden;
}

let para = document.getElementById("para"),
str = para.textContent;
let i = 0, timer = 0;

function typing() {
    if (i <= str.length) {
        para.innerHTML = str.slice(0,i++) + "__";
        // i++ ==> i = i;i = i + 1  加法运算是在后进行的
        // 所以为了能够流畅运行，需要让 i <= str.length
        // 当然，也可以 i < str.length，然后把 i++ 改成 ++i，运行效果也是一样的
        timer = setTimeout(typing,150);
    } else {
        clearTimeout(timer);
        // _闪烁效果
        setInterval(function() {
            if (para.innerHTML.search("__") != -1) {
                // 包含"__"
                para.innerHTML = str + "&nbsp;&nbsp;&nbsp;";
                // 注意：可以根据实际情况更改_的个数和空格的个数，在使用浏览器默认字体时，空格所占空间和_的比例为 1.5 : 1
                // 因此，我这里用了2个_和3个空格
            } else{
                // 不包含"__"
                para.innerHTML = str + "__";
            }
        },500);
    }
}

window.onload = function() {
    para.style.visibility = "visible";
    typing();
}

注意：这里只显示了一些必要的代码，实际操作可以按照需求更改