PHP直播源码,实现简单弹幕效果

简介: PHP直播源码,实现简单弹幕效果

PHP直播源码实现简单弹幕效果的相关代码

<!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>大作业_弹幕</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
 
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
 
    .wrapBox {
      width: 800px;
      height: 550px;
      border: 1px solid #000;
      margin: 50px auto 0;
    }
 
    .videoBox {
      height: 500px;
      position: relative;
      overflow: hidden;
    }
 
    .videoBox img {
      width: 100%;
      height: 100%;
    }
 
    video {
      width: 100%;
    }
 
    .danmuSend {
      display: flex;
      height: 50px;
    }
 
    #content {
      flex: 1;
    }
 
    #send {
      width: 100px;
    }
 
    .danmu {
      color: #f00;
      font-size: 20px;
      position: absolute;
      left: 800px;
      top: 0;
      white-space: nowrap;
    }
 
    .danmu img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  </style>
</head>
 
<body>
  <div class="wrapBox">
    <div class="videoBox">
      <img src="longmao.jpg" />
      <span class="danmu">我是弹幕</span>
    </div>
    <div class="danmuSend">
      <input id="content" type="text">
      <button id="send">发送</button>
    </div>
  </div>
</body>
<script>
 
  var oSend = document.querySelector('#send');
  var oContent = document.querySelector('#content');
  var oVideoBox = document.querySelector('.videoBox');
  //点击发送按钮时触发此事件
  oSend.onclick = function () {
    //获取文本框输入的内容
    var content = oContent.value;
    createDanmu(content)
  }
 
  function createDanmu(content) { // 创建弹幕 =>  移动  => 消失
    //新建一个span类型的标签
    var oSpan = document.createElement('span');
    //将获取的输入的内容传入标签
    oSpan.innerHTML = '<img src="longmao.jpg">' + content;
    //添加其class属性,对头像图片进行样式修改
    oSpan.classList.add('danmu');
    //设置其字体颜色属性随机
    oSpan.style.color = randomColor();
    //在oVideoBox所代表的的标签内添加该元素
    oVideoBox.appendChild(oSpan);
    //使该新标签出现的位置随机
    oSpan.style.top = Math.round(Math.random() * (oVideoBox.clientHeight - oSpan.offsetHeight)) + 'px';
    //设置定时器,使其位置改变
    var timer = setInterval(function () {
    // 初始位置
    var start = oSpan.offsetLeft;
    // 偏移量
    start -= 10;
    //先判断,使其向左移动相对父元素的距离最终小于其右边时移除该元素,并清除该定时器
      if (start < -oSpan.offsetWidth) { 
        clearInterval(timer);
        oSpan.remove();
      }
      // 赋值新位置
      oSpan.style.left = start + 'px';
    }, 100);
  }
  //用来生成随机颜色
  function randomColor() {
    return 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
  }
</script>
</html>

以上就是PHP直播源码实现简单弹幕效果的相关代码, 更多内容欢迎关注之后的文章

目录
相关文章
|
10天前
|
前端开发 安全 Java
响应式企业网站源码JavaL/PHP带后台管理​:Bootstrap HTML5模板
本指南深度解析基于Java/PHP双引擎与Bootstrap HTML5的响应式企业官网开发全流程,涵盖架构设计、后台管理、数据库规范、安全加固及云原生部署,助力企业实现品牌展示、业务转化与运营闭环,推动数字化转型。
|
10天前
|
小程序 PHP 图形学
热门小游戏源码(Python+PHP)下载-微信小程序游戏源码Unity发实战指南​
本文详解如何结合Python、PHP与Unity开发并部署小游戏至微信小程序。涵盖技术选型、Pygame实战、PHP后端对接、Unity转换适配及性能优化,提供从原型到发布的完整指南,助力开发者快速上手并发布游戏。
|
12天前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
2月前
|
小程序 安全 关系型数据库
专业打造一款圈子源码软件系统 / 后端 PHP 搭建部署一样实现利益化
本教程详解基于PHP后端与Uni-app的小程序开发全流程,涵盖技术选型、环境搭建、源码导入、接口对接及功能实现。采用Laravel/Symfony框架,结合MySQL/PostgreSQL数据库,使用WebSocket实现实时通信,并集成IM SDK实现音视频聊天。前端使用Uni-app开发,支持跨平台运行。教程包含完整部署流程与安全优化方案,助力快速搭建高性能、安全稳定的小程序系统。
175 5
|
2月前
|
存储 缓存 安全
php项目源码加密之Zend Guard Loader加密的代码解密可能性很小-优雅草卓伊凡
php项目源码加密之Zend Guard Loader加密的代码解密可能性很小-优雅草卓伊凡
115 2
|
2月前
|
运维 安全 数据可视化
采用PHP+Vue技术架构的不良事件管理系统(源码)
本系统为医院安全(不良)事件管理工具,支持快速上报、流程化处理与多维度分析,助力识别风险、优化管理。采用PHP+Vue技术架构,功能涵盖事件上报、追踪整改、数据统计及PDCA改进等。
118 0
|
5月前
|
PHP
基于PHP开发的资源库系统源码
基于PHP开发的资源库系统源码
116 13
|
6月前
|
前端开发 算法 NoSQL
前端uin后端php社交软件源码,快速构建属于你的交友平台
这是一款功能全面的社交软件解决方案,覆盖多种场景需求。支持即时通讯(一对一聊天、群聊、文件传输、语音/视频通话)、内容动态(发布、点赞、评论)以及红包模块(接入支付宝、微信等第三方支付)。系统采用前后端分离架构,前端基于 UniApp,后端使用 PHP 框架(如 Laravel/Symfony),配合 MySQL/Redis 和自建 Socket 服务实现高效实时通信。提供用户认证(JWT 集成)、智能匹配算法等功能,助力快速上线,显著节约开发成本。
158 1
前端uin后端php社交软件源码,快速构建属于你的交友平台
|
9月前
|
前端开发 关系型数据库 MySQL
PHP外链网盘系统网站源码
> 本文将详细介绍如何从零构建一个基于PHP和MySQL的文件管理系统,分解项目代码并剖析每个模块的功能。我们将以`index.php`、`config.php`和`api.php`这三个核心文件为例,详细展示如何设计文件列表、数据库配置和文件上传接口,从而实现一个完整的文件管理系统。该文章可以作为学术研究和代码实现的参考。
429 98