蓝桥杯（Web大学组）2023省赛真题：视频弹幕

思路：

主要是要仔细阅读题目以及理解给出的已有代码，进行函数间的调用、定时器的使用、元素移除、清除定时器等，注意细节。

笔记：

1. height不要写成hight
2. 设置left时,记得加单位px
3. 可以获取left的值进行计算，但要注意spanEle.style.left是带单位的字符串，要用parseInt进行转换：parseInt(spanEle.style.left)

发现一个知识点：

spanEle.style.left = `${getEleStyle(videoEle).width}px`;

spanEle.style.left = `${parseInt(spanEle.style.left)-bulletConfig.speed}px`;

        这里可以第二条语句中可以通过spanEle.style.left取值，是因为第一条语句使元素的样式为内联样式，如果没有第一条语句，而 spanEle 的样式不是内联样式（即通过内联style属性设置的），那么 spanEle.style.left 将返回一个空字符串或 undefined，取决于浏览器的实现。

        在这种情况下，执行 parseInt(spanEle.style.left) 将返回 NaN（不是一个数字），因为无法将空字符串或 undefined 转换为数字。

        这种情况下（通过CSS样式表设置的样式而不是内联样式），可以使用window.getComputedStyle方法，如下所示：

var element = document.querySelector('.a');
var computedStyle = window.getComputedStyle(element);
var leftValue = computedStyle.getPropertyValue('left');console.log(leftValue);    //输出带单位的字符串

答题部分：

1.补全 renderBullet 函数中的代码，控制弹幕的显示颜色和移动。功能说明如下：
每个弹幕内容包裹在 span 标签中，作为子节点插入到 #video 元素节点内。
生成的 span 元素节点相对于 #video 元素绝对定位 ，初始位置的 left 是 #video 元素的宽，top 是 #video 元素的高内的随机数。
注意：需求中所需样式可直接通过已提供的 getEleStyle 方法获取。
弹幕每隔 bulletConfig.time（弹幕配置对象） 时间，向左移动距离为 bulletConfig.speed（弹幕配置对象）。当弹幕最右端完全移出 #video 元素时，移除 span 元素。
function renderBullet(bulletConfig, videoEle, isCreate = false) {const spanEle = document.createElement("SPAN");//创建span标签spanEle.classList.add(`bullet${index}`);if (isCreate) {spanEle.classList.add("create-bullet")//变红}// TODO：控制弹幕的显示颜色和移动，每隔 bulletConfig.time 时间，弹幕移动的距离  bulletConfig.speedspanEle.innerText = bullets[index-1]    //弹幕内容//颜色spanEle.style.color=`rgb(${getRandomNum(255)},${getRandomNum(255)},${getRandomNum(255)})`   videoEle.appendChild(spanEle)//要添加到#videospanEle.style.left = `${getEleStyle(videoEle).width}px`;//一开始在最右边spanEle.style.top = `${getRandomNum(getEleStyle(videoEle).height, start = 0)}px`let timer = setInterval(() => {// spanEle.style.left = `${parseInt(spanEle.style.left)-bulletConfig.speed}px`  // 或spanEle.style.left = `${spanEle.offsetLeft - bulletConfig.speed}px`if(getEleStyle(spanEle).right<=getEleStyle(videoEle).left){videoEle.removeChild(spanEle)   //元素出去后移除 clearInterval(timer)    //清除定时器}}, bulletConfig.time);
}

2.补全 #sendBulletBtn 元素的绑定事件，点击发送按钮，输入框中的文字出现在弹幕中，样式不同于普通弹幕（样式红色字体红色框已设置，类名为 create-bullet ）。
通过调用 renderBullet 方法和正确的传参实现功能。document.querySelector("#sendBulletBtn").addEventListener('click', () => {// TODO:点击发送按钮，输入框中的文字出现在弹幕中//bulletConfig.value是弹幕的内容bulletConfig.value= document.querySelector("#bulletContent").valueif(bulletConfig.value){//判断内容是否非空//弹幕出现在视频中，就调用上面那个函数，不用重新创建那个spanrenderBullet(bulletConfig,videoEle,true)}document.querySelector("#bulletContent").value=""   //清空输入框
})

完整代码：

const bullets = ["前方高能","原来如此","这么简单","学到了","学费了","666666","111111","workerman","学习了","别走，奋斗到天明"];/*** @description 根据 bulletConfig 配置在 videoEle 元素最右边生成弹幕，并移动到最左边，弹幕最后消失* @param {Object} bulletConfig 弹幕配置* @param {Element} videoEle 视频元素* @param {boolean} isCreate 是否为新增发送的弹幕，为 true 表示为新增的弹幕* 
*/// 1.补全 renderBullet 函数中的代码，控制弹幕的显示颜色和移动。功能说明如下：
// 每个弹幕内容包裹在 span 标签中，作为子节点插入到 #video 元素节点内。
// 生成的 span 元素节点相对于 #video 元素绝对定位 ，初始位置的 left 是 #video 元素的宽，top 是 #video 元素的高内的随机数。
// 注意：需求中所需样式可直接通过已提供的 getEleStyle 方法获取。
// 弹幕每隔 bulletConfig.time（弹幕配置对象） 时间，向左移动距离为 bulletConfig.speed（弹幕配置对象）。
// 当弹幕最右端完全移出 #video 元素时，移除 span 元素。
function renderBullet(bulletConfig, videoEle, isCreate = false) {const spanEle = document.createElement("SPAN");//创建span标签spanEle.classList.add(`bullet${index}`);if (isCreate) {spanEle.classList.add("create-bullet")//变红}// TODO：控制弹幕的显示颜色和移动，每隔 bulletConfig.time 时间，弹幕移动的距离  bulletConfig.speedspanEle.innerText = bullets[index-1]    //弹幕内容//颜色spanEle.style.color=`rgb(${getRandomNum(255)},${getRandomNum(255)},${getRandomNum(255)})`   videoEle.appendChild(spanEle)//要添加到#videospanEle.style.left = `${getEleStyle(videoEle).width}px`;//一开始在最右边spanEle.style.top = `${getRandomNum(getEleStyle(videoEle).height, start = 0)}px`let timer = setInterval(() => {// spanEle.style.left = `${parseInt(spanEle.style.left)-bulletConfig.speed}px`  // 或spanEle.style.left = `${spanEle.offsetLeft - bulletConfig.speed}px`if(getEleStyle(spanEle).right<=getEleStyle(videoEle).left){videoEle.removeChild(spanEle)   //元素出去后移除 clearInterval(timer)    //清除定时器}}, bulletConfig.time);
}// 2.补全 #sendBulletBtn 元素的绑定事件，点击发送按钮，输入框中的文字出现在弹幕中，样式不同于普通弹幕（样式红色字体红色框已设置，类名为 create-bullet ）。通过调用 renderBullet 方法和正确的传参实现功能。
document.querySelector("#sendBulletBtn").addEventListener('click', () => {// TODO:点击发送按钮，输入框中的文字出现在弹幕中//bulletConfig.value是弹幕的内容bulletConfig.value= document.querySelector("#bulletContent").valueif(bulletConfig.value){//判断内容是否非空//弹幕出现在视频中，就调用上面那个函数，不用重新创建那个spanrenderBullet(bulletConfig,videoEle,true)}document.querySelector("#bulletContent").value=""   //清空输入框
})function getEleStyle(ele) {// 获得元素的width,height,left,right,top,bottomreturn ele.getBoundingClientRect();
}function getRandomNum(end, start = 0) {// 获得随机数，范围是 从start到 endreturn Math.floor(start + Math.random() * (end - start + 1));
}// 设置 index 是为了弹幕数组循环滚动
let index = 0;
const videoEle = document.querySelector("#video");
// 弹幕配置
const bulletConfig = {isHide: false, // 是否隐藏speed: 5, // 弹幕的移动距离time: 50, // 弹幕每隔多少ms移动一次value:"" // 弹幕的内容
}
let isPlay = false;
let timer; // 保存定时器
document.querySelector("#vd").addEventListener('play', () => {// 监听视频播放事件，当视频播放时，每隔 1000s 加载一条弹幕isPlay = true;bulletConfig.value = bullets[index++];renderBullet(bulletConfig, videoEle);timer = setInterval(() => {bulletConfig.value = bullets[index++];renderBullet(bulletConfig, videoEle);if (index >= bullets.length) {index = 0;}}, 1000);
})document.querySelector("#vd").addEventListener("pause", () => {isPlay = false;clearInterval(timer);
})document.querySelector("#switchButton").addEventListener("change", (e) => {if (e.target.checked) {bulletConfig.isHide = false;} else {bulletConfig.isHide = true;}
})