蓝桥杯（Web大学组）2023省赛真题：视频弹幕
思路：
主要是要仔细阅读题目以及理解给出的已有代码，进行函数间的调用、定时器的使用、元素移除、清除定时器等，注意细节。
笔记：
- height不要写成hight
- 设置left时,记得加单位px
- 可以获取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.speed
spanEle.innerText = bullets[index-1] //弹幕内容
//颜色
spanEle.style.color=`rgb(${getRandomNum(255)},${getRandomNum(255)},${getRandomNum(255)})`
videoEle.appendChild(spanEle)//要添加到#video
spanEle.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").value
if(bulletConfig.value){//判断内容是否非空
//弹幕出现在视频中，就调用上面那个函数，不用重新创建那个span
renderBullet(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.speed
spanEle.innerText = bullets[index-1] //弹幕内容
//颜色
spanEle.style.color=`rgb(${getRandomNum(255)},${getRandomNum(255)},${getRandomNum(255)})`
videoEle.appendChild(spanEle)//要添加到#video
spanEle.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").value
if(bulletConfig.value){//判断内容是否非空
//弹幕出现在视频中，就调用上面那个函数，不用重新创建那个span
renderBullet(bulletConfig,videoEle,true)
}
document.querySelector("#bulletContent").value="" //清空输入框
})
function getEleStyle(ele) {
// 获得元素的width,height,left,right,top,bottom
return ele.getBoundingClientRect();
}
function getRandomNum(end, start = 0) {
// 获得随机数，范围是 从start到 end
return 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;
}
})