利用JS实现逐字的效果 - Icharle | Don't forget your first thoughts

逐字打印的效果是不是感觉很高大上的样子咧？其实实现这个也是蛮简单的啦，几行JS代码。

简简单单的几行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逐字打印</title>
</head>
<body>
    <div id="showstring"></div>
    <div style="display:none" id="string">测试长时间了解科技生物课和我黑色复合物的时候福利和法国李时空距离为健康世纪东方健康的风景看发看似简单快递反</div> 
</body>
<script type="text/javascript">
    var index = 0;  
    var str = document.getElementById("string").innerHTML;  
    function type() {  
        if(index > str.length) {  
        index = 0;       //设置为index = str.length;则打印完一串以后会停下来，设置为index = 0;则一直循环打印
    }  
    document.getElementById("showstring").innerText = str.substring(0, index++);  
    }  
    setInterval(type, 200);     //屏幕打字的时间长短
</script>
</html>