思路:
主要是要仔细阅读题目以及理解给出的已有代码,进行函数间的调用、定时器的使用、元素移除、清除定时器等,注意细节。
笔记:
- 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.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;}
})