JavaScript实现跑马灯-摘抄自扬帆向海的博客

摘抄自扬帆向海的博客，点击这里查看原文
跑马灯就是这条信息串首尾相连，向一个方向循环滚动。。。
在这里插入图片描述

使用js实现

实现逻辑：

① 根据id值获取标签
② 获取标签的文本内容
③ 截取文本内容的第一个字
④ 截取文本内容第一个字后面的所有内容
⑤ 把第③步截取的第一个字拼接到第④步截取的文本内容后面
⑥ 将第⑤步拼接后的字符串写入到第①步的标签中

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯js实现跑马灯效果</title>
    <style>
        .btn-start {
            text-align: center;
            color: white;
            background-color: green;
            font-size: 15px;
            margin-top: 10px;
        }

        .btn-stop {
            text-align: center;
            color: white;
            background-color: red;
            font-size: 15px
        }

        .btn-wrap {
            margin: 10px auto;
            width: 32%;
        }

        #str {
            background-color: rgb(116, 114, 231);
            color: white;
            font-size: 35px;
            width: 32%;
            margin: auto;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>

<body>
    <div id="str">欢迎访问扬帆向海的博客!!!</div>

    <div class="btn-wrap">
        <button class="btn-start">
            <span onclick="start()">动起来</span>
        </button>

        <button class="btn-stop">
            <span onclick="stop()">停下来</span>
        </button>
    </div>

    <script type="text/javascript">
        var intervalId = null;
        var timerId = null;
        $(function () {
            initTimer();
        })

        function start() {
        	// 判断定时器id是否为空
            if (intervalId != null) {
                return
            }
            intervalId = setInterval(function () {
                var label = document.getElementById('str'); 
                var text = label.innerText;
                var begin = text.substring(0, 1);
                var end = text.substring(1);
                var text_new = end + begin;
                label.innerText = text_new;
            }, 200);
        }

        function stop() {
        	// 清除定时器
            clearInterval(intervalId);
            // 把定时器id置为空
            intervalId = null;
        }

        function initTimer() {
        	// 设置在指定2秒后执行
            timerId = setTimeout(function () {
                start();
            }, 2000);
        }
    </script>

</body>

</html>