案例1：

描述：在输入框输入内容，实现弹幕功能。

<body>
    <input type="text" id="words" />
    <input type="button" value="走你" id="btn" />
</body>

CSS代码如下：

<style>
        .newList{
            height: 100px;
            overflow: hidden;
            background-color: #ccc;
            position: relative;
        }
		
    </style>

JS代码如下：

<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        var words = document.getElementById("words").value;
        var span = document.createElement("span");
        span.innerHTML = words;
        document.getElementById("words").value = ""; // 清空之前的内容
        span.style.position = "absolute";
        span.style.left = "600px";
        span.style.top = Math.floor(document.documentElement.clientHeight * Math.random()) + "px";
        document.body.appendChild(span);
        // 让span动起来
        timer = setInterval(function () {
            span.style.left = parseInt(span.style.left) - 4 + "px";
            // 当span离开了浏览器，需要清空定时器，并销毁span
            if(parseInt(span.style.left) < -1*span.offsetWidth){
                // 删除span
                document.body.removeChild(span)
                // 清空定时器
                clearInterval(timer)
            }
        },50)
    }
</script>

案例2：

描述：文字跑马灯效果

我们常常能看到显示屏上字体的滚动以及手机弹幕等，下面所示代码就是一个简易的文字跑马灯的效果：

<div id="wrap">
    <div id="first">
        <span>华晨宇</span>—— 没有人规定，一定要在什么年龄干什么事情，只要你想，随时都可以，不用太在意别人的看法！
    </div>
    <div id="last">
        <span>华晨宇</span>—— 就是我为什么说孤独的人是强大的，孤独的人是不会去在意外面的世界的。
        就是你自己想的什么东西，就直接说。 但是我还是一个前提，就是你说出来的东西一定要是建立
        在一个善良的基础上的。说什么的时候你可以去想一想，这句话说完之后会不会伤害到他。但如果
        你觉得说完这句话是在帮助这个人，你可以说。如果你只是凭自己的意气用事，就觉得我现在很不爽，
        我说出来了。但是说完这句话是纯只是伤害他的话，其实你跟他们就没区别了。
    </div>
</div>

CSS代码如下：

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 16px;
        }
        #wrap {
            width: 1000px;
            margin: 20px auto;
            border: 2px solid #51C9F1;
            white-space: nowrap;
            overflow: hidden;
            padding: 10px;
            color: gold;
            background: mediumpurple;
        }

        #wrap div {
            display: inline-block;
            font-size: 20px;
        }

        #wrap span {
            font-size: 20px;
            color: yellow;
        }
    </style>

JS代码如下：

<script type="text/javascript">

    (function () {
        var wrap = document.getElementById('wrap'), first = document.getElementById('first'); //获取标签
        var timer = window.setInterval(move, 5);
        wrap.onmouseover = function () {
            window.clearInterval(timer);
        };
        wrap.onmouseout = function () {
            timer = window.setInterval(move, 5);
        };
        function move() {
            wrap.scrollLeft++;
            if (wrap.scrollLeft >= first.scrollWidth) {
                wrap.scrollLeft = 0;
            }
        }
    })();

</script>

版权声明：本文为weixin_49758373原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_49758373/article/details/118279353