JS原生实现视频弹幕Demo（仿）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Js原生弹幕</title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px
} html, body {
height: 100%
} body {
overflow: hidden;
background-color: #FFF;
text-align: center;
} .flex-column {
display: flex;
flex-direction: column;
justify-content: space-between;, align-items: center;
} .flex-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} .wrap {
overflow: hidden;
width: 70%;
height: 600px;
margin: 100px auto;
padding: 20px;
background-color: transparent;
box-shadow: 0 0 9px #222;
border-radius: 20px;
} .wrap .box {
position: relative;
width: 100%;
height: 90%;
background-color: #000000;
border-radius: 10px
} .wrap .box span {
position: absolute;
top: 10px;
left: 20px;
display: block;
padding: 10px;
color: #336688
} .wrap .send {
display: flex;
width: 100%;
height: 10%;
background-color: #000000;
border-radius: 8px
} .wrap .send input {
width: 40%;
height: 60%;
border: 0;
outline: 0;
border-radius: 5px 0px 0px 5px;
box-shadow: 0px 0px 5px #d9d9d9;
text-indent: 1em
} .wrap .send .send-btn {
width: 100px;
height: 60%;
background-color: #fe943b;
color: #FFF;
text-align: center;
border-radius: 0px 5px 5px 0px;
line-height: 30px;
cursor: pointer;
} .wrap .send .send-btn:hover {
background-color: #4cacdc
}
</style>
</head>
<body>
<div class="wrap flex-column">
<div class="box">
<video src="danmu.mp4" width="100%" height="100%" controls autoplay></video>
</div>
<div class="send flex-row">
<input type="text" class="con" placeholder="弹幕发送[]~(^v^)~*">
<div class="send-btn">发送</div>
</div>
</div>
<!-- javascript 前端中能做什么
1.响应用户的操作 事件（键盘事件、鼠标事件）
2.操作dom元素（增删改查、属性操作、样式等）
3.数据交互 表单验证 ajax json jsonp 正则表达式
4.造轮子 mvvm mvc nodeJS jquery
-->
<!-- 需求分析
用户点击发送按钮 把input的内容展示到box里面
1.元素 .con .send-btn .box span（创建）
2.事件：点击事件 键盘事件
3.行为
1.点击.send-btn获取.con的内容
(1)规范发送信息
(2)禁止空及全空格
(3)存储value值
2.根据内容动态生成span标签
(1)创建节点document.createElement
(2)改变节点内容innerHTML
(3)节点 生成初始化位置等
(4)标签添加到oBox appendChild
3.message运动
(1)改变元素的left值
(2)定时器改变 setInterval
(3)this代表当前弹幕
(4)弹幕left = 当前left-1
4.随机函数
Math.random 0-1 包括0但不包括1
(1)top
(2)color
(3)fontsize
(4)textShadow
(5)timing运动曲线
linear
ease-out
5.业务完善
(1)过去的删除掉
停止计时器
删除自身
终止函数
(2)完善回车输入
在oCon上回车 发送弹幕
-->
<script src="jquery.min.js" type="text/javascript"></script>
<script>
//1.获取元素
var oBox = document.querySelector('.box'); //获取.box元素
var oCon = document.querySelector('.con'); //获取input框
var oBtn = document.querySelector('.send-btn'); //获取发送按钮
var cW = oBox.offsetWidth; //获取box的宽度
var cH = oBox.offsetHeight; //获取box的高度
var message = ''; //弹幕内容初始化
oBtn.onclick = send; //点击发送
oCon.onkeydown = function (e) {
e = e || window.event;
if (e.keyCode === 13) {
//回车键
send();
}
};
function send() {
//获取oCon的内容
if (oCon.value.length <= 0 || (/^\s+$/).test(oCon.value)) {
alert('请输入弹幕');
return false;
}
message = oCon.value;
console.log(message);
//生成标签
createEle(message); //执行节点创建模块
oCon.value = ''; //收尾工作清空输入框
}
function createEle(txt) {
//动态生成span标签
var oMessage = document.createElement('span'); //创建标签
oMessage.innerHTML = txt; //接收参数txt并且生成替换内容
oMessage.style.left = cW + 'px'; //初始化生成位置x
oBox.appendChild(oMessage); //把标签塞到oBox里面
roll.call(oMessage, {
//call改变函数内部this的指向
timing: ['linear', 'ease-out'][~~(Math.random() * 2)],
color: '#' + (~~(Math.random() * (1 << 24))).toString(16),
top: random(0, cH),
fontSize: random(16, 32)
});
}
function roll(opt) {
//弹幕滚动
//如果对象中不存在timing 初始化
opt.timing = opt.timing || 'linear';
opt.color = opt.color || '#fff';
opt.top = opt.top || 0;
opt.fontSize = opt.fontSize || 16;
this._left = parseInt(this.offsetLeft); //获取当前left的值
this.style.color = opt.color; //初始化颜色
this.style.top = opt.top + 'px';
this.style.fontSize = opt.fontSize + 'px';
this.timer = setInterval(function () {
if (this._left <= 100) {
clearInterval(this.timer); //终止定时器
this.parentNode.removeChild(this);
return; //终止函数
}
switch (opt.timing) {
case 'linear': //如果匀速
this._left += -2;
break;
case 'ease-out': //
this._left += (0 - this._left) * .01;
break;
}
this.style.left = this._left + 'px';
}.bind(this), 1000 / 60);
}
function random(start, end) {
//随机数封装
return start + ~~(Math.random() * (end - start));
}
var aLi = document.querySelectorAll('li'); //10 function forEach(ele, cb) {
for (var i = 0, len = aLi.length; i < len; i++) {
cb && cb(ele[i], i);
}
}
forEach(aLi, function (ele, i) {
ele.style.left = i * 100 + 'px';
});
//产生闭包
var obj = {
num: 1,
add: function () {
this.num++; //obj.num = 2;
(function () {
console.log(this.num);
})
}
};
obj.add(); //window
</script>
</body>
</html>
JS原生实现视频弹幕Demo（仿）的更多相关文章
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
- Canvas + WebSocket + Redis 实现一个视频弹幕
原文出自:https://www.pandashen.com 页面布局 首先,我们需要实现页面布局,在根目录创建 index.html 布局中我们需要有一个 video 多媒体标签引入我们的本地视频, ...
- 图片轮播(左右切换)--JS原生和jQuery实现
图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
- js原生回到顶部
<!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...
- JS原生Date类型方法的一些冷知识
ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...
- 使用jQuery.makeArray() 将多种类型转换成JS原生Array
jQuery.makeArray(obj)这个函数从名字上来看非常easy猜出它的用途:应该是用来将传入的对象转换成一个原生array 再看看官网上对它的解释:Convert an array-lik ...
- JS原生上传大文件显示进度条-php上传文件
JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M post_max_size = 10M memory_li ...
- js原生高逼格插件
如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...
随机推荐
- SpringMVC框架09——@ResponseBody的用法详解
@ResponseBody可以标注在方法上也可以标注在类上面.简单来说,当标注在方法上时,该方法的返回结果直接转成JSON格式:当标注在类上时,该类中的所有方法的返回结果都转换成JSON格式. 代码示 ...
- Springboot 2.0.x 集成基于Centos7的Redis集群安装及配置
Redis简介 Redis是一个基于C语言开发的开源(BSD许可),开源高性能的高级内存数据结构存储,用作数据库.缓存和消息代理.它支持数据结构,如 字符串.散列.列表.集合,带有范围查询的排序集,位 ...
- HttpClient之初步认识与使用1
今天在项目中看到HttpClient的内容,然后去看了一下资料,有了初步的见解,在此记录一下~ 一. 搭建环境 (1)创建一个java项目叫HttpClientTest (2)为了使用HttpClie ...
- spark加载模型与gRPC与JSF与JDQ冲突
spark与JSF冲突解决方式 <dependency> <groupId>org.apache.spark</groupId> <artifactId> ...
- BZOJ.5137.Standing Out from the Herd(广义后缀自动机)
题目链接 \(Description\) 对于每个串,求在\(n\)个串中只在该串中出现过的子串的数量. \(Solution\) 建广义SAM.对每个串插入时新建的np标记其属于哪个串. 然后在pa ...
- BZOJ.3510.首都(LCT 启发式合并 树的重心)
题目链接 BZOJ 洛谷 详见这. 求所有点到某个点距离和最短,即求树的重心.考虑如何动态维护. 两棵子树合并后的重心一定在两棵树的重心之间那条链上,所以在合并的时候用启发式合并,每合并一个点检查sz ...
- elastic-job 新手指南
大多数情况下,定时任务我们一般使用quartz开源框架就能满足应用场景.但如果考虑到健壮性等其它一些因素,就需要自己下点工夫,比如:要避免单点故障,至少得部署2个节点吧,但是部署多个节点,又有其它问题 ...
- DotNetty z
使用说明 客户端的代码和服务端的代码相差很少,体现了Netty统一的编程模型.有几个不同点: 客户端的Bootstrap不是ServerBootstrap: 客户端不需要主线程组,只有工作线程组,消息 ...
- 浅谈压缩感知（二十一）：压缩感知重构算法之正交匹配追踪（OMP）
主要内容: OMP的算法流程 OMP的MATLAB实现 一维信号的实验与结果 测量数M与重构成功概率关系的实验与结果 稀疏度K与重构成功概率关系的实验与结果 一.OMP的算法流程 二.OMP的MATL ...
- 从网上找的Android实用代码，记录备用
1.获取应用程序下所有Activity public static ArrayList<String> getActivities(Context ctx) { ArrayList< ...