前端成长之路


2、跑马灯

代码片段：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑马灯</title>
</head>

<body>
    <h3 id="deng">
        欢迎陈志伟大人莅临指导
    </h3>
    <script type="text/javascript">
        function show() {
            //用document.getElementById获取id值为deng属性,并赋值给tag变量
            var tag = document.getElementById("deng");
            //第1点获取到的是<h3 id="deng">欢迎陈志伟大人莅临指导</h3>，通过var text = tag.innerText，将内容的文本赋值给text
            var text = tag.innerText;
            //将text文本的第一个值赋值给firststring
            var firststring = text[0];
            //通过substing获取除了上面获取的第一个值以外的字符串
            var endstring = text.substring(1, text.length);
            //将内容拼接，并通过函数不断的执行，可以完成跑马灯的效果
            var datastring = endstring + firststring;
            //最后将获取到的内容添加到tag中
            tag.innerText = datastring;
        }
        setInterval(show, 1000);
    </script>
</body>

</html>

页面列表

ITEM_HTML