所有的页面逻辑也是比较简单，用原生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. 代码检查又一利器：ArchUnit

    Code Review总是让人又爱又恨,它可以帮助我们在提测之前发现很多代码中比较"丢人"的问题,但是,Code Review通常会比写代码更加耗费精力,因为你需要理解别人的代码, ...

  2. 为什么我的tomcat启动不起来?

    现象: tomcat安装好了,准备部署Web项目了,启动tomcat,发现没有反应. 虽然显示了Tomcat started.但是这个 started不等同于 success,当我们打开浏览器访问80 ...

  3. python基础入门 字典

    字典 字典---->dict 字典是无序的,可变的 关联性强 键值对 键:使用不可变的数据类型(可哈希),键是唯一的 值:可以任意 定义一个字典 dic = {}#定义字典 ​ 字典的增删改查 ...

  4. 从《彩色圆环》一题探讨一类环上dp的解法

    清橙A1202 bzoj2201 bsoj4074 试题来源 2010中国国家集训队命题答辩 问题描述 小A喜欢收集宝物.一天他得到了一个圆环,圆环上有N颗彩色宝石,闪闪发光.小A很爱惜这个圆环,天天 ...

  5. python网络编程socketserver模块（实现TCP客户端/服务器）

    摘录python核心编程 socketserver(python3.x版本重新命名)是标准库中的网络编程的高级模块.通过将创建网络客户端和服务器所必须的代码封装起来,简化了模板,为你提供了各种各样的类 ...

  6. 渗透测试初学者的靶场实战 2--墨者学院SQL注入—报错盲注

    墨者SQL注入-MYSQL数据库实战环境 实践步骤 1. 决断注入点 输入单引号,提示错误信息: 输入and 1=1 返回页面正常: 输入 and 1=2 返回正常 输入-1,返回异常: 2. 带入s ...

  7. C++之结构体特点

    C++的结构体和C语言的结构体有什么不同 C++的结构体其实就是类的一种,只不过类成员默认访问权限是private,结构体默认访问权限是public. C语言的结构体是不能有函数的,而C++可以有. ...

  8. js 从两道面试题加深理解闭包与箭头函数中的this

     壹 ❀ 引 在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this,正好今早地铁上看到了两道面试题,试着做了下发现挺有意思,所以想单独写一篇文章来记录解析过程.若你对于闭包与t ...

  9. 魔兽争霸RPG地图开发速成教程

    魔兽争霸RPG地图开发速成教程 1 打开WE编辑器 下载地址  http://rpg.dz.blizzard.cn/authors-home/editor-download 然后新建地图 2  打开工 ...

  10. WebShell代码分析溯源(七)

    WebShell代码分析溯源(七) 一.一句话变形马样本 <?php $e = $_REQUEST['e'];$arr = array($_POST['POST'],);array_map(ba ...