面向对象弹幕

最新推荐文章于 2020-09-16 20:31:01 发布
最新推荐文章于 2020-09-16 20:31:01 发布
阅读量179 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46500485/article/details/108507399
版权

面向对象弹幕

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        u {
            text-decoration: none;
            margin-bottom: 1px;
            vertical-align: top;
        }
        
        .app {
            width: 800px;
            height: 500px;
            margin: 100px auto;
        }
        
        .app .video {
            overflow: hidden;
            position: relative;
            width: 800px;
            height: 500px;
            background-color: black;
        }
        
        .app .message {
            display: flex;
        }
        
        .message>input {
            height: 50px;
            flex: 8;
        }
        
        .message>button {
            flex: 2;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="video"></div>
        <div class="message">
            <input type="text" name="" id="">
            <button>发射弹幕</button>
        </div>
    </div>
    <script>
        var video = document.querySelector('.video');
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
         //存放弹幕的数组
        var num = [];
        //添加鼠标点击事件
        btn.addEventListener('click', () => {
        	//得到input框中的值
            let value = input.value;
            //当input中的值为空的时候  不执行下面的函数
            if (value === '') {
                return
            }
            // console.log(1);
            //创建对象  并将每次点击之后创建的对象存放在一个全局的数组中
            num.push(new CreateBubble(video, value, 4))
            //将input的值置为空
            input.value = ''

        })

       

        function CreateBubble(container, content, great) {
            //获取存放元素的播放框
            this.container = container;
            //获取点赞数
            this.great = great;
            //获取内容
            this.content = content;
            //创建存放弹幕的框
            this.div = document.createElement('div');
            //创建存放弹幕内容的框
            this.span = document.createElement('span');
            //创建存放点赞数的框
            this.u = document.createElement('u');
            //初始化函数
            this.init();
            //随机创建速度
            this.speed = parseInt(Math.random() * 5) + 2;
            //将随机创建的速度保存下来
            this.speed1 = this.speed;
        }
        CreateBubble.prototype = {
            constructor: CreateBubble,
            init() {
                //创建弹幕
                this.createMge();
                //上树
                this.upTree();
                //添加样式
                this.addStyle();
                //让弹幕移动
                // this.addMove();
                //停止移动
                // this.stopMove();
                //鼠标移入事件
                this.stopMove();
                //重新移动
                this.reMove();
                //删除事件
                // this.delete();
            },
            //创建弹幕元素
            createMge() {
				//将input框中的内容给到span 
                this.span.innerHTML = this.content;
                //将点赞数给到u
                this.u.innerHTML = this.great;
                //将span和u都添加到div 也就是弹幕的大框中
                this.div.appendChild(this.span);
                this.div.appendChild(this.u);

            },
            //上树
            upTree() {
            //将弹幕框添加到容器中
                this.container.appendChild(this.div);

            },
            //渲染样式
            addStyle() {
                divStyle = {
                    position: 'absolute',
                    //给每个弹幕框一个随机高度
                    top: Math.random() * this.container.clientHeight / 2 + 'px',
                    //把弹幕框的初始位置放到容器的右边
                    left: this.container.clientWidth + 'px',
                    width: '200px',
                    height: '20px',
                    border: '1px dotted rgb(255,0,0)',
                    //随机弹幕框中的颜色
                    color: `rgb(${parseInt(Math.random()*256)},${parseInt(Math.random()*256)},${parseInt(Math.random()*256)})`,
                };
                for (var i in divStyle) {
                    this.div.style[i] = divStyle[i];
                };
                spanStyle = {
                    display: 'inline-block',
                    maxWidth: '180px',
                    // minWidth: '100px',
                    height: '20px',
                    //单行文本溢出隐藏
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                }
                for (var i in spanStyle) {
                    // console.log(1);
                    this.span.style[i] = spanStyle[i];
                }

            },
            //添加移动事件
            addMove() {
				//每次移动的距离都是当前距离左边框的位置减去速度
                this.div.style.left = this.div.offsetLeft - this.speed + 'px';
            },
            //添加停止移动事件
            stopMove() {
            	//当鼠标移入弹幕的时候  将速度置为0
                this.div.addEventListener('mouseenter', () => {
                    this.speed = 0;
                })
            },
            //添加重新移动事件
            reMove() {
            //当鼠标移出弹幕的时候  将速度置为原先的速度
                this.div.addEventListener('mouseleave', () => {
                    this.speed = this.speed1;
                })
            },
            //添加删除事件
            delete() {
                this.div.remove();
            }
        }
        setInterval(function() {
            // console.log(num);
            //循环数组中的每个对象  给每个对象触发移动事件
            num.forEach((item, index) => {
                item.addMove();
                //当弹幕的距离小于自身的宽度的负数的时候  删除元素  并将数组中对应的对象删除了
                if (item.div.offsetLeft < -item.div.offsetWidth) {
                    num.splice(index, 1);
                    item.delete();
                }
            })
        }, 30)
    </script>
</body>

</html>
江呱呱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS面向对象式编程实现弹幕，利用观察者模式
ldh1101的博客
11-21 169
直接上源代码 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> <style> input{
Jquery实现弹幕效果
一行代码
05-22 1万+
话不多说吧，直接看效果吧： 主要思路 其实弹幕的主要思路很简单，就是将div从右向左移动，直到完全移除屏幕之后，将当前div从body中移除，这里我采用了面向对象的思想来处理，具体js代码如下： JS /** * 弹幕 */ $(function () { function BarrageManager (options) { this.opts...
利用面向对象写弹幕效果
有糖吃就会笑3
08-19 420
利用面向对象写弹幕效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .cont
弹幕功能的实现
literarygirl的博客
11-11 2516
弹幕功能的实现 在做项目的时候用到了弹幕功能 弹幕的字体大小和颜色也都是随机的，代码奉上 html: <div class="clearfix tool-switch-container" id="btn-barrage"> <input id="switch" type="checkbox" class="switch" /> ...
弹幕的简单实现
热门推荐
WeXio的博客
06-21 1万+
前言     现在很多的视屏网站，像优酷、acfun，甚至直播网站都实现了弹（dàn）幕技术。弹幕的添加，使得观看视屏的实时评论可以被同时观看这个视屏的其他用户所看到，并且可以加入到讨论当中。完全改变了以往看视屏的方式。相信大家在观看视屏时也有所体会。那么这篇博客将记录怎么实现简单弹幕的过程。 分析     在使用的弹幕视频网中，我们可以简单的分析弹幕的基本逻辑。当用户发送一条文本消
弹幕工具.rar
05-27
2. C++：C++是一种静态类型的、编译式的、通用的、大小写敏感的、不仅支持面向过程的编程，也支持面向对象的编程的程序设计语言。在弹幕工具中，C++用于实现底层逻辑和高效的数据处理。 3. 弹幕工具：弹幕工具的核心...
弹幕-Swift
04-19
4. **类与对象**：用于创建面向对象的程序设计。 5. **函数**：定义代码块以执行特定任务。 6. **闭包**：可捕获和存储上下文中的常量和变量的匿名函数。 接下来，我们关注弹幕的实现原理。弹幕效果主要通过以下...
实现弹幕 js
03-26
总的来说，“实现弹幕 js”项目涵盖了JavaScript基础、面向对象编程、DOM操作、定时器和CSS样式等多个知识点，对于提升前端开发技能大有裨益。通过这个项目，你不仅可以学习到如何创建动态效果，还能了解如何将用户...
【最新】快手直播弹幕源码更新于2022年7月11（有例子）
07-13
易语言是一种国产的、面向对象的、具有可视化编程界面的编程语言，它的特点是语法简洁，适合初学者快速上手。易语言的精益模块可能是用于提供网络通信、数据解析等功能的库，简化了开发过程。 根据描述，该源码是...
c++编写的弹幕机器
11-26
【C++编写的弹幕机器】是一个基于C++编程语言实现的基础型弹幕展示系统。在互联网直播或视频播放中，弹幕作为一种独特的互动方式，让观众可以实时发送文字信息，形成滚动显示的效果，增强观看体验。这个项目的核心是...
JavaScript实现弹幕效果
秃桔子的博客
05-19 677
JavaScript实现弹幕效果 效果如下 <html> <head> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script&g...
某个公司采用公用电话传递数据数据是四位的整数，在传递过程中是加密的 加密规则如下： 每位数字都加上5 然后用除以10的余数代替该数字 再将第一位和第四位交换 第二位和第三位交换
weixin_46500485的博客
08-20 6217
某个公司采用公用电话传递数据数据是四位的整数，在传递过程中是加密的 加密规则如下： 每位数字都加上5 然后用除以10的余数代替该数字 再将第一位和第四位交换 第二位和第三位交换 // 请编写一个函数，传入原文，输出密文 var jiami = function(num) { console.log(num); //分别取出个十百千位 var first = parseInt(num / 1000); var sec = pars
改变this指向的三个方法
weixin_46500485的博客
09-01 3582
改变this指向的三个方法 函数方法 有3个 1 call 2 apply 3bind(ES5新增) //call apply bind 都可以改变this指向 //其中 call和apply改变时是在函数执行的时候改变 bind改变时是在函数定义的时候改变 //定义一个函数实现两个数相加 function demo(a, b) { console.log(this); re
Promise的静态方法
weixin_46500485的博客
09-16 3233
Promise的静态方法 1.Promise.all() <!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>
数组sort方法实现列表的正序和倒序
weixin_46500485的博客
09-02 2316
数组sort方法实现列表的正序和倒序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
php根据表单数据添加到数据库
weixin_46500485的博客
09-15 1891
php根据表单数据添加到数据库 <!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>
scroll事件及其应用
weixin_46500485的博客
09-03 1598
scroll事件及其应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
JSON的两个方法(JSON转字符串和字符串转JSON)
weixin_46500485的博客
09-01 1572
JSON的两个方法(JSON转字符串和字符串转JSON) //JSON javaScript Object Notation //JSON是一种数据格式 只要符合key：value 这种格式的都叫做JSON //数组是JSON的一种 对象也是JSON的一种 //JSON是一种数据格式 //他有多种表现形式 //第一种就是数组和对象 //第二种就是字符串形式 var obj = {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值