js渐显文字时间间隔

Posted 2020-12-02 风起时的悟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js渐显文字时间间隔相关的知识，希望对你有一定的参考价值。

文字指定时间间隔，逐渐显现所有文字。

一日，看到一官网首页有个文字渐显，感觉和手写上去一样，很是炫酷。F12发现不是动画，于是研究了下。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐显</title>
</head>
<body>
<div style="font-family:宋体" id="append"></div>
<script>
    var append = document.getElementById("append");
　　
    var str1 = ‘你好世界，世界那么大，我好想去看看!!‘;　　//要显现的文字
    var array1 = str1.split(‘‘);　　//将文字切割成单个
    console.log(array1);
    var timer = setInterval(jianbian, 300);　　//设置时间间隔 循环周期为300毫秒，自行修改 ，每300毫秒执行一次jianbian方法
    console.log(array1.length);
    var i = 0;
　　//进入方法
    function jianbian() {
　　　　　//循环完毕撤销时间器
        if (i == array1.length) {
            clearInterval(timer);
            console.log(‘取消时间器‘);
        } else {
　　　　　　　//依次追加文字
            append.innerHTML += array1[i];
            console.log(i + ‘:‘ + array1[i]);
            i++;
        }
    }
</script>
</body>
</html>

　　字体样式就不贴了。

总结：多看别人写的东西，终会成就那样的人。

以上是关于js渐显文字时间间隔的主要内容，如果未能解决你的问题，请参考以下文章

原生js实现图片网格式渐显渐隐效果

移动端实现弹出框渐显和渐隐效果

如何能让浏览的网页每间隔几秒刷新一次

如何组合绑定片段而不将它们包装在 XML 文字中

段落排版--中文字间距字母间距

Android Place自动填充片段：无法设置文字

js渐显文字 时间间隔

js渐显文字时间间隔