所有的页面逻辑也是比较简单，用原生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. C#中关于值类型和引用类型的区别

    小声哔哔 一直以来对于值类型与引用类型之间的区别都不是特别清晰,直到踩了坑.... 正好最新闲暇,便想着梳理梳理这一两年来遇到的奇葩问题和解决方案,顺便就把它给拎出来记一下,免得以后再摔跤 值类型与引 ...

  2. ES6，箭头函数 (=>)注意点

    函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. 不可以使用arguments对象,该对象在函数体内不存 ...

  3. 【GTK编程】安装与测试

    版权声明:本文为博主原创文章,转载请注明出处. https://www.cnblogs.com/YaoYing/ 前言 领导让做个类似平板触摸的GUI程序,通过触摸两块区域,实现背景图片的左右切换.本 ...

  4. 一篇文章搞明白Integer、new Integer() 和 int 的概念与区别

    基本概念的区分 1.Integer 是 int 的包装类,int 则是 java 的一种基本数据类型 2.Integer 变量必须实例化后才能使用,而int变量不需要 3.Integer 实际是对象的 ...

  5. 关于Java调用接入微信、支付宝支付提现

    前言: 本篇文章介绍关于自己写的一个集成微信.支付宝的支付.提现等功能的介绍,本项目已在码云上进行开源,欢迎大家一起来进行改造,使进行更好的创新供大家使用:也有对应的pom文件坐标可以导入,因目前不知 ...

  6. 《Java基础知识》Java成员变量，成员方法，构造方法和析构方法

    一 成员变量 成员变量是指类的一些属性定义,标志类的静态特征,它的基本格式如下: [访问修饰符][修饰符][类型][属性名称]= [初始值] 访问修饰符:public(公共的):protected(受 ...

  7. SpringCloud分布式配置中心

    一.什么是配置中心 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud c ...

  8. 红帽杯-MISC-Advertising for Marriage

    convert -flip screenshot.png screensho1.png 本篇结合我上一博客https://www.cnblogs.com/qq3285862072/p/11869403 ...

  9. impala-shell导出数据存在中文异常问题

    由于查询在impala-shell 中没有问题,在导出数据的时候才有问题,这是impala-shell的客户端是由python编写的,而Python无法自动将unicode对象写入没有设置默认编码的输 ...

  10. Java 商户管理系统 客户管理 库存管理 销售报表 SSM项目源码

    系统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3  SSM ...