原生JS实现弹幕的简单操作速成

首先需要操作文档必须拿到Dom中的元素，当然有很多方法，这里还是用document.querySelector.

这边也是为了键盘和鼠标都可发送封装了一个函数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 var ev = e || event; var keyCode = ev.keyCode || ev.which; 判断如果按的是键盘enter的keycode码是13和alt组合 if (keyCode === 13 && ev.altKey) { sendMsg();}} 以下是bod代码，可以练练