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

写这个纯属是因为喜欢这首歌
歌名：一瞥
<!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;
        function type() {
            if (index == str.length) {
                clearInterval(timer)
            }
            document.getElementById("showStr").innerText = str.substring(0, index++);
        }
        timer = setInterval(type, 1000); //通过定时器来让文字逐步显示  
    </script>
</body>

</html>
萌二è招财猫！
发布了30 篇原创文章 · 获赞 9 · 访问量 2512
私信关注
setInterval实现歌词或者诗句一点点展示出来

猜你喜欢
