js构造对象实现弹幕功能

弹幕就是不停得滚动，但是目前没法操作后台，也么数据。因此内容被我用数组的方法弄了部分假的数据，代码<!DOCTYPE html<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
        
        #wrap {
            position: relative;
            width: 1200px;
            height: 300px;
            background: rgba(215, 221, 222, 1);
            border-radius: 10px;
            margin: 50px auto;
            padding-top: 22px;
            overflow: hidden;
        }
        
        #wrap .list {
            position: absolute;
            box-sizing: border-box;
            padding: 0 10px;
            width: auto;
            height: 50px;
            overflow: hidden;
            color: #333;
            text-align: center;
            line-height: 50px;
            font-size: 14px;
            border-radius: 20px;
            background: rgba(237, 241, 242, 1)
        }
    </style>
</head>

<body>
    <!-- 最外层盒子，放置弹幕的区域 -->
    <div id="wrap">
        <!-- 里面的每个小盒子，用来放置弹幕 -->
    </div>

    <script>
        // 页面加载完成后执行
        window.onload = function() {
            // 创建一个函数
            function barrage(top, right, num) {
                // 获取到最外层放置弹幕的盒子
                var oWrap = document.getElementById("wrap");

                this.top = top;
                this.right = right;
                this.timer = null;

                // 新建一个放弹幕内容的数组
                var roll = ["今天是2019年11月8日", "今天天气晴朗", "适合出去玩耍", "无为大佬给我找找bug", "欢迎大家来济南玩"];

                var len = roll.length;

                // 定义一个初始化方法
                this.init = function() {
                    this.oList = document.createElement("div");
                    this.oList.classList.add("list"); //创建一个类名为list的div
                    oWrap.appendChild(this.oList); // 将类名为list的div添加到最外层的盒子
                    this.oList.style.top = this.top + "px";
                    this.oList.style.right = this.right + "px";
                    this.oList.innerHTML = roll[num % len];
                };

                // 设置方法，让弹幕滚动起来
                this.roll = function() {

                    //此处需要备份，因为进入setInterval之后this就是window了
                    var self = this;
                    this.timer = setInterval(function() {
                        self.right++;
                        if (self.right > 1000) self.die();
                        self.oList.style.right = self.right + "px";
                    }, 10);
　　　　　　　　　　　　

                    this.oList.onmouseover = function() {
                        clearInterval(self.timer);
                    }
                };

                this.die = function() {
                    // 清理定时器
                    clearInterval(this.timer);

                    // 清除div
                    oWrap.removeChild(this.oList);
                }

                //调用初始化方法
                this.init();
                // 调用滚动
                this.roll();
            }

            // 定义信号量
            var num = 0;

            setInterval(function() {
                new barrage(Math.random() * 250, -160, num);
                num++;
            }, 2000);
        }
    </script>
</body>

</html>

效果大概如下

问题是这个有bug，没找出来。也没解决 当页面刷新之后换到另一个页面他会积累好多内容。然后整体移动至左边。希望有大佬提出改正方法。

谢谢！！！

posted @ 2019-11-08 16:43  安雁-zzq  阅读(300)  评论(0)    收藏  举报