文字逐个现实

最新推荐文章于 2023-12-14 19:53:12 发布

流浪大叔

最新推荐文章于 2023-12-14 19:53:12 发布

阅读量152

点赞数

分类专栏：前端 js 文章标签：文字显示效果

本文链接：https://blog.csdn.net/qq_36311091/article/details/79932485

版权

前端同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文字逐个显示</title>
    <script>
        window.onload=function(){
            /*文字逐个显示*/
            var story = document.getElementById('word');
            var s = document.getElementById('show');
            var i = 0;
            timer=setInterval(function(){
                s.innerHTML=story.innerHTML.substring(0,i);
                i++;
                if(s.innerHTML==story.innerHTML){
                    clearInterval(timer);
                }
            },500);
        }
    </script>
</head>
<body>
<div id="word" style="display:none;">
    <p>最后陪你聊天那一夜，互道晚安后，才发现一直在单曲循环《不分手的恋爱》。zr</p>
<p>我亦飘零久，十年来，深恩负尽，死生师友。--顾贞观《金缕曲》</p>
<p>夜深忽梦少年事，唯梦闲人不梦君。</p>
<p>人言落日是天涯，望极天涯不见家。</p>
</div>
<div id="show"></div>
</body>
</html>