10.js文字滚动 效果

CSS样式 

<style>
        span:nth-child(1) {
            background-color: pink;
        }

        span {
            display: block;
        }

        span:nth-child(3) {
            background-color: yellow;
        }
    </style>

HTML结构

<span>
        如果有一天我变得很有钱,我会买下所有难得一见的的笑脸,变有钱变有钱如果有一天我变得很有钱,我会买下所有难得一见的的笑脸
        ,变有钱变有钱如果有一天我变得很有钱,我会买下所有难得一见的的笑脸,变有钱变有钱如果有一天我变得很有钱,我会买下所有难得
        一见的的笑脸,变有钱变有钱如果有一天我变得很有钱,我会买下所有难得一见的的笑脸难得一见的的笑脸,变有钱变有钱钱,我会买下
        ,变有钱变有钱如果有一天我变得很有所有
    </span>
    <br>
    <span></span>

js代码段

<script>
        //获取元素
        var span1 = document.getElementsByTagName("span")[0];
        var span2 = document.getElementsByTagName("span")[1];
        setInterval(function () {
            var str = span1.innerText;
            var str1 = str.charAt(0);  //第一个
            var arr = str.slice(1);
            span2.innerText += str1;    //间隙一次传一次
            span1.innerText = arr;
        }, 500)
</script>