13-传统弹幕_HTML_移动技术网

13-传统弹幕

传统弹幕

简述：实现最简单的弹幕

dom简单实现传统弹幕

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="txt" id="txt">
    <button id="btn">提交</button>
</body>
</html>

js部分

<script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            // clearInterval(timer);
            var txt = document.getElementById("txt").value;
            var span = document.createElement("span");
            span.innerHTML = txt;

            //清空之前的样式
            document.getElementById("txt").value="";


            //js操作span的行内样式
            span.style.position = "absolute";
            span.style.left = "600px";                                                                                                                                                  

            span.style.top = Math.floor(document.documentElement.clientHeight * Math.random()) + "px";

            //将span挂载到DOM上
            document.body.appendChild(span);

            
            var 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);
                    console.log(timer);
                }
            },40)
        }
    </script>

运行效果
在这里插入图片描述

面向对象实现传统弹幕

其他部分如上，只有js发生改变

<script>
    // DOM   JQ
    function Bullet(words) {
        this.span = document.createElement("span");

        if(Math.random()<0.2){
            this.span.style.fontSize = "50px";
        }

        this.span.style.position = "absolute";
        this.span.style.left = document.body.offsetWidth + "px";
        console.log(document.documentElement.offsetHeight)
        this.span.style.top = Math.floor(document.body.offsetHeight*Math.random()) + "px";
        this.span.innerHTML = words;

        this.timer = null;

        this.init();  // 初始化工作
        this.move();  // 滚动起来
    }

    Bullet.prototype.init = function () {
        document.body.appendChild(this.span)
    }
    Bullet.prototype.move = function () {
        let that = this;
        this.timer = setInterval(function () {
            // 改变弹幕的left
            that.span.style.left = parseInt(that.span.style.left) - 4 + "px";
            if(parseInt(that.span.style.left) < -1*this.span.offsetWidth){
                // 删除span
                document.body.removeChild(that.span)
                // 清除定时器
                clearInterval(that.timer)
            }
        },50)
    }

    var btn = document.getElementById("btn");
    btn.onclick = function () {
        let words = document.getElementById("words").value;
        let obj = new Bullet(words);
    }
</script>

本文地址：https://blog.csdn.net/weixin_45344023/article/details/107881964