前言
现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果，那么如何用JS实现这样的效果呢，用一个初学者的方法记录下这个方法，欢迎大牛指导。
1、首先需要操作文档必须拿到Dom中的元素，当然有很多方法，这里还是用document.querySelector.
2、这边也是为了键盘和鼠标都可发送封装了一个函数function sendMsg(){
首先需要创建一个容器来接受你编辑的内容，这里用span标签，当然其他标签也可
var oSpan=document.cerateElement(“span”)
将oSpan插入到需要展示的oVideoBox
oVideoBox.appendChild(oSpan)
给oSpan加入class用于编辑插入的样式，当然也可以用js,这里用的CSS样式oSpan.classList.add(“danmu”)
用innerHTML接用户图像及弹幕内容这里用ES6的一个``
oSpan.innerHTML =` < img src ="./source/lei.jpg" /> ${oContent.value}
计算弹幕出现的初始位置，left位移初始位置即oVideoBox的宽度oVideoBox.offsetWidth.也是oSpan的初始定位oSpan.offsetLeft
top位移的初始即oVideoBox内随机的高度，避免超出
var maxTop=oVideoBox…clientHeight-oSpan.offsetHeight; var top=Math.round(Math.random()*maxTop) oSpan.style.top = top+ ‘px'
当然JS的动画也离不开计时器。这边也是用setInterval()
var timer=setInterval(()=>{
var left=oSpan.offsetLeft
left-=10
oSpan.style.left= left+ ‘px'
这边判断一下如果超出屏幕就把弹幕和计时器移出
if(left<-oSpan.offsetWidtb){
clearInterval(timer);
oSpan.remove();}},100)
以上就完成了简易版的弹幕函数就封装完成了，后面就可以引用了，
事件从点击开始，弹幕也是创建点击事件oSend.onclick,
oSend.οnclick=function(){引用函数sendMsg()}
后面可以加上一个键盘的enter可以发送,是一个事件委托window.οnkeydοwn=function(e){
var ev = e || event; var keyCode = ev.keyCode || ev.which;
判断如果按的是键盘enter的keycode码是13和alt组合
if (keyCode === 13 && ev.altKey) {
sendMsg();}}
以下是bod代码，可以练练
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>作业_弹幕</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wrapBox {
width: 800px;
height: 550px;
border: 1px solid #000;
margin: 50px auto 0;
}
.videoBox {
height: 500px;
position: relative;
overflow: hidden;
}
.videoBox img {
width: 100%;
height: 100%;
}
video {
width: 100%;
/* height: 500px; */
}
.danmuSend {
display: flex;
height: 50px;
}
#content {
flex: 1;
}
#send {
width: 100px;
}
.danmu {
color: #f00;
font-size: 20px;
position: absolute;
left: 800px;
top: 0;
white-space: nowrap;
}
.danmu img {
width: 60px;
height: 60px;
border-radius: 50%;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="wrapBox">
<div class="videoBox">
<img src="/UploadFiles/2021-04-02/bg.jpg">
以下是JS的代码：
<script>
var oSend = document.querySelector('#send');
var oContent = document.querySelector('#content');
var oVideoBox = document.querySelector('.videoBox');
function sendMsg() {
var content = oContent.value;
var oSpan = document.createElement('span');
oSpan.className = 'danmu';
oSpan.innerHTML = `<img src="/UploadFiles/2021-04-02/bg.jpg">
总结
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。