setInterval实现歌词或者诗句一点点展示出来

最新推荐文章于 2023-04-15 10:58:37 发布

萌二è招财猫！

最新推荐文章于 2023-04-15 10:58:37 发布

阅读量118

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42446516/article/details/97789960

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

写这个纯属是因为喜欢这首歌
歌名：一瞥

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {

            text-align: center;
            font-size: 26px;
            font-weight: bold;
            color: #fff;
            width:100%;
            height:100%;
            font-family: '宋体'
        }
        .wrap{
            width:100%;
            height:100%;
            background:url("http://bpic.588ku.com/back_pic/05/76/84/775bebca355ea90.jpg") repeat-y;
            overflow-x: hidden;
            overflow-y: scroll;
            background-size:130%;
        }
    </style>

<body>
    <div class='wrap'>
        <p id="showStr"></p>
    </div>
    <div style="display:none" id="string">
            才话别 就深秋
            床前明月独坐
            不甘心的寂寞
            对谁诉说
            不会说才不说
            眼泪划过耳蜗
            你不再为我
            我不再难过
            就这样结果
            也许只是眼角无意的一瞥
            就注定了你我
            大雨一直滂沱
            屋檐雨水滴落
            思念对谁说
            也许只是眼角无意的一瞥
            就注定了寂寞
            就算你已远走
            我还站在原地
            傻傻的等候
            不会说才不说
            眼泪划过眼窝
            你不再为我
            我不再难过
            就这样结果
            也许只是眼角无意的一瞥
            就注定了你我
            大雨一直滂沱
            屋檐雨水滴落
            思念对谁说
            也许只是眼角无意的一瞥
            就注定了寂寞
            就算你已远走
            我还站在原地
            傻傻的等候
            也许只是眼角无意的一瞥
            就注定了你我
            大雨一直滂沱
            屋檐雨水滴落
            思念对谁说
            也许只是眼角无意的一瞥
            就注定了寂寞
            就算你已远走
            我还站在原地
            傻傻的等候
    </div>
    <script>
        var timer = null;
        var index = 0;
        // 因为上面的文本在中间，并且还换行了,所以要去除空格
        var str = document.getElementById("string").innerHTML.replace(/\ +/g,"");
        function type() {
            if (index == str.length) {
                clearInterval(timer)
            }
            document.getElementById("showStr").innerText = str.substring(0, index++);
        }
        timer = setInterval(type, 1000); //通过定时器来让文字逐步显示  
    </script>
</body>

</html>