分析
类型：VUE
分数：15分
难度：难
考点
- 动态添加 dom、移除 dom
setInterval()定时器的使用、clearInterval()使用- 通过
left属性，控制元素向左移动
解题思路
第一题：动态添加弹幕，在 定时器 中，控制弹幕向左移动，当移出屏幕时，移除弹幕
第二题：调用 renderBullet() 函数发送弹幕，注意第3个参数是 true 表示新弹幕
技巧
使用 getRandomNum() 函数获取随机数
使用 getEleStyle() 函数获取 dom 的宽度、高度
实现
第一题
修改 index.js 文件：
/**
* @description 根据 bulletConfig 配置在 videoEle 元素最右边生成弹幕，并移动到最左边，弹幕最后消失
* @param {Object} bulletConfig 弹幕配置
* @param {Element} videoEle 视频元素
* @param {boolean} isCreate 是否为新增发送的弹幕，为 true 表示为新增的弹幕
*
*/
function renderBullet(bulletConfig, videoEle, isCreate = false) {
const spanEle = document.createElement("SPAN");
spanEle.classList.add(`bullet${index}`);
if (isCreate) {
spanEle.classList.add("create-bullet");
}
// TODO：控制弹幕的显示颜色和移动，每隔 bulletConfig.time 时间，弹幕移动的距离 bulletConfig.speed
videoEle.appendChild(spanEle)
// 设置弹幕的left初始位置
const videoRect = getEleStyle(videoEle)
let left = videoRect.width;
const top = getRandomNum(videoRect.height)
spanEle.innerText = bulletConfig.value
spanEle.style.color = "#"+getRandomNum(999999)
spanEle.style.top = top+"px"
const spanRect = getEleStyle(spanEle)
const si = setInterval( ()=>{
// 每次移动距离
left -= bulletConfig.speed
spanEle.style.left = left+"px"
// 控制是否隐藏。要加在 setInterval() 中，实时控制弹幕隐藏/显示
if(bulletConfig.isHide){
spanEle.style.display = "none"
}else{
spanEle.style.display = "inline"
}
// 判断弹幕移出 #video ，移除弹幕，停止 setInterval() 函数
if( left + spanRect.width <= 0){
videoEle.removeChild(spanEle)
// 弹幕移出后，停止执行，减轻浏览器压力
clearInterval(si)
}
},bulletConfig.time)
}
第二题
修改 index.js 文件：
document.querySelector("#sendBulletBtn").addEventListener("click", () => {
// TODO:点击发送按钮，输入框中的文字出现在弹幕中
bulletConfig.value = document.querySelector("#bulletContent").value;
renderBullet(bulletConfig, videoEle,true);
});