所有的页面逻辑也是比较简单，用原生js实现，封装也是比较简单！要让页面效果更为炫酷，则可去引入相应的css,背景图片自己去img/下下载引入喔！

HTML页面

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<!-- <link rel="stylesheet" href="css/li.css"> -->
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
user-select:none;
}
.screen{
    overflow: hidden;
    position: relative;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    background-image: url(img/bright5.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.send{
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
line-height: 80px;
background-color: rgba(10,10,10,0.6);
text-align: center;
}
.input{
position: absolute;
left: 50%;
top: 50%;
margin: -20px -350px;
font-size: 0;
}
.text{
float: left;
width: 600px;
height: 40px;
border: none;
border-radius: 8px 0 0 8px;
}
.s_show div{
position: absolute;
font-size: 24px;
font-weight: bold;
}
.btn{
float: left;
width: 100px;
background-color:black;
line-height: 40px;
font-size: 24px;
color: #fff;
cursor: pointer;
border-radius: 0 8px 8px 0;
}
</style>
 
<title>Welcome to coming</title>
</head>
<body>
<div class="screen">
<div class="send">
<div class="input clearfix">
<input type="text" class="text">
<div class="btn">Send</div>
</div>
</div>
<div class="s_show">
<div class="magictime twisterInUp">你好！欢迎来到赖清华的世界</div>
<div class="magictime twisterInUp">亲亲，我是爱你的呀</div>
<div class="magictime twisterInUp">"略略略~，你这是简直不要太喜欢我啦！</div>
<div class="magictime twisterInUp">年轻人，不要总是睡喔！</div>
</div>
</div>
<script>
//模块化 每个功能函数去做自己相应的事情 代码可维护性 可扩展性
//初始化函数
var aShowList = document.querySelectorAll('.s_show div');//获取元素 H5
var oShow = document.querySelector('.s_show');
var oSend = document.querySelector('.send');
var oBtn = document.querySelector('.btn');
var oText = document.querySelector('.text');
var time = 0;//上一次你发送的时间
var time1 = 0;
//点击发送弹幕
 
oBtn.onclick = function(){//鼠标点击事件
sendContent();
}
//按键盘的"enter"键发送内容
oText.onkeyup = function (ev) {
var e = ev || window.event;
if (e.keyCode == 13) {
sendContent();
}
}
 
function sendContent(){
//oBtn.style.backgroundColor = randomColor();//按钮背景颜色变换
time1 = new Date();
oBtn.style.color = randomColor();//按钮字体颜色变换
if(time1 - time > 1000){//2次发送的时间必须大于1秒
var oDiv = document.createElement('div');//创建div
oDiv.innerHTML = oText.value;//添加弹幕内容
oDiv.className = 'magictime twisterInUp';//弹幕特效
oShow.appendChild(oDiv);//添加一个子节点
init(oDiv);//初始化
oText.value = '';
time = time1;
//console.log(time);
}else{
alert("略略略~，你这是简直不要太喜欢我啦！请稍后再发~");
}
}
 
for(var i = 0;i < aShowList.length;i++){
init(aShowList[i]);//执行初始化函数
}
 
function init(obj){//接受弹幕对象
//确定top值的随机区间
var screenHeight = document.documentElement.clientHeight;//获取屏幕可视高度
var maxTop = screenHeight - oSend.offsetHeight - obj.offsetHeight;//高度差范围
obj.style.top = maxTop * Math.random() + 'px';
//控制left值
var screenWidth = document.documentElement.clientWidth;//获取可视宽度
var maxLeft = screenWidth - obj.offsetWidth - Math.random() * 100;//随机宽度差
obj.style.left = maxLeft + 'px';
//弹幕的随机颜色
obj.style.color = randomColor();
/*setInterval(function(){
move(obj,maxLeft);
},1000);*///普通定时器
move(obj,maxLeft);
}
//弹幕移动函数
function move(obj,maxLeft){
var speed = 5;//控制速度的变量
maxLeft -= speed;//往左移动
if(maxLeft > -obj.offsetWidth){
obj.style.left = maxLeft + 'px';
requestAnimationFrame(function(){
move(obj,maxLeft);
});//H5新增的动画函数
}else{
//init(obj);//重新初始化 营造循环弹幕效果
oShow.removeChild(obj);//DOM删除子节点
}
}
//随机颜色函数
function randomColor(){
return '#' + Math.random().toString(16).slice(-6);//一行简化版截取后六位
/*var str = '#';
for(var i = 0;i < 6;i++){
str += Math.floor(Math.random() * 16).toString(16);
}
return str;*///普通逻辑版
}
</script>
</body>
</html>

荧屏弹幕_新增h5requestAnimationFrame实现的更多相关文章

  1. SSM整合_年轻人的第一个增删改查_新增

    写在前面 SSM整合_年轻人的第一个增删改查_基础环境搭建 SSM整合_年轻人的第一个增删改查_查找 SSM整合_年轻人的第一个增删改查_新增 SSM整合_年轻人的第一个增删改查_修改 SSM整合_年 ...

  2. 零基础逆向工程20_PE结构04_任意节空白区_新增节_扩大节添加代码

    向代码节添加代码实现 作者经过一周不断的失败,再思考以及无数次调试终于实现. 思路:八个步骤 1. 文件拷到文件缓冲区(FileBuffer) //图示见(零基础逆向工程18之PE加载过程) 2. 文 ...

  3. QA16复制_新增查询条件，修改批量使用决策

    需求: 增加评估代码,检验类型条件.(检验批中部分检验项目未录结果的检验批显示    注:标准的程序,不支持空结果的查询和使用决策) 1.复制 RQEVAI10 程序 2.因为这是用的QM模块的逻辑数 ...

  4. 3、尚硅谷_SSM高级整合_使用ajax操作实现增加员工的功能

    20.尚硅谷_SSM高级整合_新增_创建员工新增的模态框.avi 1.接下来当我们点击增加按钮的时候会弹出一个员工信息的对话框 知识点1:当点击新增的时候会弹出一个bootstrap的一个模态对话框 ...

  5. Maven+ajax+SSM实现新增

    转载自:https://www.cnblogs.com/kebibuluan/p/9014986.html 20.尚硅谷_SSM高级整合_新增_创建员工新增的模态框.avi 1.接下来当我们点击增加按 ...

  6. SSM整合_年轻人的第一个增删改查_基础环境搭建

    写在前面 SSM整合_年轻人的第一个增删改查_基础环境搭建 SSM整合_年轻人的第一个增删改查_查找 SSM整合_年轻人的第一个增删改查_新增 SSM整合_年轻人的第一个增删改查_修改 SSM整合_年 ...

  7. SSM整合_年轻人的第一个增删改查_查找

    写在前面 SSM整合_年轻人的第一个增删改查_基础环境搭建 SSM整合_年轻人的第一个增删改查_查找 SSM整合_年轻人的第一个增删改查_新增 SSM整合_年轻人的第一个增删改查_修改 SSM整合_年 ...

  8. 【爬虫+情感判定+Top10高频词+词云图】“刘畊宏“热门弹幕python舆情分析

    一.背景介绍 最近一段时间,刘畊宏真是火出了天际,引起一股全民健身的热潮,毕竟锻炼身体,是个好事! 针对此热门事件,我用Python的爬虫和情感分析技术,针对小破站的弹幕数据,分析了众多网友弹幕的舆论 ...

  9. 【爬虫+情感判定+Top10高频词+词云图】"王心凌"热门弹幕python舆情分析

    目录 一.背景介绍 二.代码讲解-爬虫部分 2.1 分析弹幕接口 2.2 讲解爬虫代码 三.代码讲解-情感分析部分 3.1 整体思路 3.2 情感分析打标 3.3 统计top10高频词 3.4 绘制词 ...

随机推荐

  1. 使用CleanWebpackPlugin插件报错原因：CleanWebpackPlugin is not a constructor

    // webpack版本:4.32.2 // 抛错原写法 const CleanWebpackPlugin = require("clean-webpack-plugin"); . ...

  2. [从今天开始修炼数据结构]图的最小生成树 —— 最清楚易懂的Prim算法和kruskal算法讲解和实现

    接上文,研究了一下算法之后,发现大话数据结构的代码风格更适合与前文中邻接矩阵的定义相关联,所以硬着头皮把大话中的最小生成树用自己的话整理了一下,希望大家能够看懂. 一.最小生成树 1,问题 最小生成树 ...

  3. Jquery使用ajax与Flask后端进行数据交互

    最近做项目碰到一个坑,jquery使用ajax向flask传输数据的时候,在后端采用request.data无论如何都获取不到数据,代码如下: 前端: <script> function ...

  4. 每天用Mybatis，但是Mybatis的工作原理你真的知道吗？

    近来想写一个mybatis的分页插件,但是在写插件之前肯定要了解一下mybatis具体的工作原理吧,于是边参考别人的博客,边看源码就开干了. 核心部件: SqlSession Executor Sta ...

  5. prototype原型

    1.prototype是函数的一个属性,并且是函数的原型对象.引用它的必然是函数[对象都是通过函数创建的], 这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做co ...

  6. HTTP 错误 500.19 - Internal Server Error解决办法详解

    最近在服务器端部署程序发现这个问题,HTTP 错误 500.19 - Internal Server Error,程序在本地跑是没有问题的.但是部署完,浏览程序就出现这个问题,今天这篇文章就是记录一下 ...

  7. 后缀数组SA入门（史上最晦涩难懂的讲解）

    参考资料:victorique的博客(有一点锅无伤大雅,记得看评论区),$wzz$ 课件(快去$ftp$%%%),$oi-wiki$以及某个人的帮助(万分感谢!) 首先还是要说一句:我不知道为什么我这 ...

  8. c++--语言本身

    c++ 面向对象概念(cout cin 类.对象 面向对象和面向过程求解问题) 易犯错误模型(引入成员函数的必要性) C语言和C++语言的关系 namespace 定义(嵌套).使用.标准命名空间st ...

  9. 5. abp集成asp.net core

    一.前言 参照前篇<4. abp中的asp.net core模块剖析>,首先放张图,这也是asp.net core框架上MVC模块的扩展点 二.abp的mvc对象 AbpAspNetCor ...

  10. Csharp:jquery.ajax-combobox

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...