介绍 oVideoBox.appendChild (oSpan) oSpan。innerHTML=' & lt;img src=https://www.yisu.com/zixun/薄?源/lei.jpg "/> $ {oContent.value} 如果(left<-oSpan.offsetWidtb) {
clearInterval(计时器);
oSpan.remove ();}}, 100) oSend.οnclick=function(){引用函数sendMsg ()} & lt; head>
& lt;元charset=癠TF-8"祝辞
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt;元http-equiv=癤-UA-Compatible"内容=癷e=edge"比;
& lt; title>作业_弹幕& lt;/title>
& lt; style>
* {
填充:0;
保证金:0;
}
身体{
字体类型:& # 39;Segoe ui # 39;,大河马字体,日内瓦Verdana,无衬线;
}
.wrapBox {
宽度:800 px;
身高:550 px;
边界:1 px固体# 000;
保证金:50 px汽车0;
}
.videoBox {
身高:500 px;
位置:相对;
溢出:隐藏;
}
.videoBox img {
宽度:100%;
高度:100%;
}
视频{
宽度:100%;/*高度:500 px;*/}
.danmuSend {
显示:flex;
高度:50 px;
}
#内容{
flex: 1;
}
#{发送
宽度:100 px;
}
.danmu {
颜色:# f00;
字体大小:20 px;
位置:绝对的;
左:800 px;
上图:0;
空白:nowrap;}
}
.danmu img {
宽度:60 px;
高度:60 px;
这个特性:50%;
vertical-align:中间;
显示:inline-block;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=皐rapBox"祝辞
& lt; div类=皏ideoBox"祝辞
https://www.yisu.com/zixun/source/bg.jpg & lt; img src="/>
我是弹幕 - ->
我是弹幕
我是弹幕
我是弹幕
我是弹幕 - ->
利用原生JavaScript编写一个弹幕功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
1,首先需要操作文档必须拿到Dom中的元素,当然有很多方法,这里还是用document.querySelector。
2,这边也是为了键盘和鼠标都可发送封装了一个函数函数sendMsg () {
首先需要创建一个容器来接受你编辑的内容,这里用内标签,当然其他标签也可
var oSpan=document.cerateElement(“跨度”)
将oSpan插入到需要展示的oVideoBox
给oSpan加入类用于编辑插入的样式,当然也可以用js,这里用的CSS样式oSpan.classList.add (danmu)
用innerHTML接用户图像及弹幕内容这里用ES6的一个“
计算弹幕出现的初始位置,左位移初始位置即oVideoBox的宽度oVideoBox.offsetWidth。也是oSpan的初始定位oSpan。offsetLeft
最高位移的初始即oVideoBox内随机的高度,避免超出
var maxTop=oVideoBox…clientHeight-oSpan.offsetHeight; var=Math.round顶部(math . random () * maxTop) oSpan.style。最高=最高+的px # 39;
当然JS的动画也离不开计时器。这边也是用setInterval ()
=setInterval (var计时器()=祝辞{
var=oSpan.offsetLeft离开
左-=10
oSpan.style。左=左+ ' px # 39; 这边判断一下如果超出屏幕就把弹幕和计时器移出
以上就完成了简易版的弹幕函数就封装完成了,后面就可以引用了,
事件从点击开始,弹幕也是创建点击事件oSend。onclick,
后面可以加上一个键盘的输入可以发送,是一个事件委托window.οnkeydοwn=function (e) {
var ev=e | |事件; var键码=电动汽车。键码| | ev.which;
判断如果按的是键盘输入的键码码是13和alt组合
如果(键码===13,,ev.altKey) {
sendMsg ();}} <强>以下是bod代码,可以练练
<输入id="内容" type=" text ">
<按钮id="发送">发送>
<强>以下是JS的代码:
