实例2：JavaScript跑马灯实例

原創

2020-02-20 14:55

知识储备
obj.charAt(n): 返回字符串中的第n个字符
obj.substring(n,m): 根据索引值获取子序列，n<=子序列<m
obj.length : 获取当前字符串长度

创建一个定时器
setInterval(“执行代码”, 时间间隔)

代码

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="i1">欢迎××××莅临指导</div>
            <script>

                function f1(){
                    //console.log(1);
                    //根据ID获取指定标签的内容
                    var tag = document.getElementById('i1');
                    //获取标签内部的内容
                    var content = tag.innerText;
                    //取content的第一个字符
                    var l = content.charAt(0);
                    //取content剩余的字符
                    var r = content.substring(1, content.length);
                    //拼接
                    var new_str = r + l;
                    //赋值
                    tag.innerText = new_str;
                }

                // 创建一个定时器
                //setInterval("alert(123);", 2000); //msecond
                setInterval("f1()", 500);
            </script>
        </body>
    </html>