响应式布局网站实例,西安 网站建设 培训班,济南建网站的网站,搜索引擎关键词优化技巧思路#xff1a;
主要是要仔细阅读题目以及理解给出的已有代码#xff0c;进行函数间的调用、定时器的使用、元素移除、清除定时器等#xff0c;注意细节。
笔记#xff1a;
height不要写成hight设置left时,记得加单位px可以获取left的值进行计算#xff0c;但要注意sp…思路
主要是要仔细阅读题目以及理解给出的已有代码进行函数间的调用、定时器的使用、元素移除、清除定时器等注意细节。
笔记
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.colorrgb(${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)}pxlet timer setInterval(() {// spanEle.style.left ${parseInt(spanEle.style.left)-bulletConfig.speed}px // 或spanEle.style.left ${spanEle.offsetLeft - bulletConfig.speed}pxif(getEleStyle(spanEle).rightgetEleStyle(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.colorrgb(${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)}pxlet timer setInterval(() {// spanEle.style.left ${parseInt(spanEle.style.left)-bulletConfig.speed}px // 或spanEle.style.left ${spanEle.offsetLeft - bulletConfig.speed}pxif(getEleStyle(spanEle).rightgetEleStyle(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;}
})
