实现文字滚动效果

知识点：

1、text.charAt

2、text.substring

3、text.length

4、document.getElementById.innerText

5、setInterval(func, time)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script></script>
</head>
<body>
    <h1 id="h1">Hello World!</h1>

    <script>
        function func() {
            var text = document.getElementById("h1").innerText;
            var a = text.charAt(0);
            var b = text.substring(1, text.length);
            var new_text = b + a;
            document.getElementById("h1").innerText = new_text;
        }
        setInterval(func, 500)
    </script>
</body>
</html>

 使用匿名函数来实现：

    <script>
        setInterval(function() {
            var text = document.getElementById("h1").innerText;
            var a = text.charAt(0);
            var b = text.substring(1, text.length);
            var new_text = b + a;
            document.getElementById("h1").innerText = new_text;
        }, 500)

    </script>

 

posted @ 2017-04-15 15:53  Vincen_shen  阅读(111)  评论(0)    收藏  举报