用js写弹幕

HTML

 <div id="box">
        <div id="content">
            <img src="./images/u=414259162,185616959&fm=26&gp=0.jpg" alt="">
            <!-- <p class="danmu">
                <img src="./images/u=414259162,185616959&fm=26&gp=0.jpg" alt="">
                <span>弹幕内容</span>
            </p> -->
        </div>
        <div id="send">
            <input type="text" id="inp">
            <input type="button" id="btn" value="send">
        </div>
    </div>

CSS

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

        #box {
            width: 800px;
            height: 500px;
            margin: 40px auto;
            background-color: #ddd;
        }

        #content {
            height: 450px;
            position: relative;
            overflow: hidden;
        }

        #content>img {
            height: 450px;
            width: 800px;
        }

        #send {
            display: flex;
            height: 50px;
        }

        #inp {
            flex: 1;
        }

        #btn {
            width: 100px;
        }

        .danmu {
            position: absolute;
            left: 800px;
            display: flex;
            white-space: nowrap;
            align-items: center;
            color: red;
            font-weight: bold;
        }

        .danmu img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 6px;
        }
    </style>

JS

 <script>
        btn.onclick = function () {
            if (!inp.value) {
                return
            }
            creatDan(inp.value)

        }
        function creatDan(woc) {
            var op = document.createElement('p');
            op.className = 'danmu';
            op.innerHTML =
                `
                <img src="./images/u=414259162,185616959&fm=26&gp=0.jpg" alt="">
                <span>${woc}</span>
            `
            content.appendChild(op);
            inp.value = '';
            var max = content.clientHeight - op.offsetHeight;
            op.style.top = parseInt(Math.random() * max) + 'px';
            move(op, 100, -op.offsetWidth, 'left', function () {
                op.remove()
            })



        }
        function move(ele, speed, end, prop, cb) {
            // 获取初始位置 获得元素属性
            var start = parseInt(getStyle(ele, prop));
            // 速度  如果结束位  判断向左移或者向右移
            speed = (end > start) ? speed : -speed;
            var t = setInterval(function () {
                start += speed;
                // 属性是个数组，因为他在不停的变化
                ele.style[prop] = start + 'px';
                if (Math.abs(start - end) < Math.abs(speed)) {
                    clearInterval(t);
                    // 防止运动过头
                    start = end;
                    ele.style[prop] = start + 'px';

                    // 运动结束之后做其他事情   -- 调用
                    // if(cb) {
                    //     cb() 
                    // }
                    cb && cb()

                }
            }, 300)
        }

        //获取样式的兼容写法
        function getStyle(ele, prop) {
            if (window.getComputedStyle) {
                return getComputedStyle(ele)[prop]
            }
            return ele.currentStyle[prop]
        }
    </script>