背景

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

思路和代码

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();

}

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

巴特西

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

背景

思路和代码

最新文章

热门文章