所有的页面逻辑也是比较简单，用原生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题

    一.题目要求 已知数据文件in.dat中存有300个四位数,并调用读函数readDat()把这些数存入数组a中,请编制一函数jsValue(),其功能是:求出所有这些四位数是素数的个数cnt,再求出所 ...

  2. eclipse Outline里图标的含义

    source: http://www.cnblogs.com/qdwyg2013/p/6489019.html 先说颜色: 绿色:public 黄色:protected 蓝色:no modifier ...

  3. Node6-1单元测试mocha

    1.初步简单的测试 在src新建一个math.js的文件.src/math.js module.exports ={ add:(...args)=>{ return args.reduce((p ...

  4. Django day03之表设计分析

    models.py文件中创建表字段分析实例: 图书管理系统---> 书.作者.出版社作为基表 from django.db import models # Create your models ...

  5. es6 数组去重

    方法一: var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2]; var arr2 = arr.filter((x, index,se ...

  6. 聊聊 print 的前世今生

    本文原创并首发于公众号[Python猫],未经授权,请勿转载. 原文地址:https://mp.weixin.qq.com/s/NuzfuH_zCZzcrmSFR04NHw (一) 上周,我翻译了一篇 ...

  7. MySql数据库之连接查询

    在MySql数据库中连接查询分为以下几种方式: 1.内连接查询 内连接查询通过关键字 inner join 关键字来实现,通过代码实现: select * from 表1 inner join 表2 ...

  8. Client error attempting to change layout margins of a private view

    从 iOS 11 开始,UINavigationBar 使用了自动布局,左右两边的按钮到屏幕之间会有 16 或 20 的边距. 为了避免点击到间距的空白处没有响应,通常做法是:定义一个 UINavig ...

  9. CentOS 7上的主机名设置和基本网络管理

    主机名 CentOS 6 查看. # hostname 设置. # hostname NEW_NAME 设置完成后,xshell的会话中不会显示NEW_NAME,可通过重新登录会话来显示.不过实际上我 ...

  10. Linux 删除特殊字符文件名或目录

    通过文件的inode号删除文件 先用ls -i 找出要删除文件的inode 号 ls -i |grep xxxxxx|awk '{print $2}'|xargs -i rm -f {} xxxxxx ...