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>

　　字体样式就不贴了。

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

posted @ 2018-07-06 18:05  风起时的悟  阅读(248)  评论(0)  编辑  收藏  举报