JS跑马灯呈现

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 100px;
            position: relative;
            border: 1px solid black;
            margin: 50px auto;
        }

        span {
            position: absolute;
            left: 0;
            top: 30px;
            width: 115px;
        }

        span:last-child {
            left: 300px;
        }
    </style>

div class="box">
        <span>bshdcbncdciduc</span>
        <span>dkjncjdcncnjcc</span>
    </div>

 <script>
            var box = document.querySelector('.box');
            var span = document.querySelectorAll('span');
            box.onclick = function () {
                setInterval(function () {
                    var start = span[0].offsetLeft
                    if (start == -box.offsetWidth) {
                        start =0
                        span[0].style.display = "none";
						span[1].style.display = "none";
                    }
                    //最终位置等于初始位置加上移动的位置
                    // 假定步长为一
                    span[0].style.left=--start+'px'
                    span[1].style.left=--start+400+'px'
                    span[0].style.display = "block";
						span[1].style.display = "block";

                    if(start % 20 === 0){
						span[0].style.color = "red";
						span[1].style.color = "red";
					}else{
						span[0].style.color = "blue";
						span[1].style.color = "blue";
					}

                },16.7)
            }
        </script>