所有的页面逻辑也是比较简单，用原生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. 解密国内BAT等大厂前端技术体系-携程篇（长文建议收藏）

    1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第四篇,前三篇已经讲述了阿里.腾讯.百度在前端技术这几年的技术发展. 这一 ...

  2. 201871010119-帖佼佼《面向对象程序设计（java）》第十六周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  3. 201871010119-帖佼佼《面向对象程序设计（java）》第十四周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  4. 带你快速了解Java锁中的公平锁与非公平锁

    前言 Java语言中有许多原生线程安全的数据结构,比如ArrayBlockingQueue.CopyOnWriteArrayList.LinkedBlockingQueue,它们线程安全的实现方式并非 ...

  5. poj 2955 Brackets (区间dp基础题)

    We give the following inductive definition of a “regular brackets” sequence: the empty sequence is a ...

  6. Blockchain 基本知识

    本文是前奏,本来要介绍Azure上的Azure Blockchain Service,发现,需要从什么是区块链开始讲起... 什么是区块链?我们从比特币说起, 2008年11月,中本聪提出了比特币白皮 ...

  7. python通过人脸识别全面分析好友，一起看透你的“朋友圈”

    微信:一个提供即时通讯服务的应用程序,更是一种生活方式,超过数十亿的使用者,越来越多的人选择使用它来沟通交流. 不知从何时起,我们的生活离不开微信,每天睁开眼的第一件事就是打开微信,关注着朋友圈里好友 ...

  8. 来来来，告诉你一个简单易上手的KPI打分的方子

    ▋1/3 前言 每个企业都要定期为员工的工作来进行考核,有月度考核.季度考核和年度考核. 这次月度考核,我打算用一种新的方式来执行. 我在我们研发小组内曾分享过能力-意愿四象限图.根据岗位技术能力和工 ...

  9. 不看好 git ，也看不懂为什么那么多人去使用 git

    上来就亮明观点,符合我的性格.呵呵呵. 为什么不看好 git 呢? 首先,我们来看看 git 产生的背景. git 是 Linus 开发的,最初的目的,是为了管理 Linux 系统的源代码.这是一个分 ...

  10. 理解OAuth2

    目录 理解OAuth2 Oatuh2用来做什么 Oauth2具体做法 Oauth2的流程 授权码模式 第三方引导用户跳转至认证服务器的授权页面 用户选择是否给予授权 认证服务器生成code并且让用户重 ...