蓝桥杯(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;}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/684251.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【汇编】简单的linux汇编语言程序

一、Linux系统汇编语言 Linux系统上的汇编语言可以使用不同的语法风格&#xff0c;主要包括Intel语法和AT&T语法。这两种语法有各自的特点和风格区别&#xff0c;尽管它们表示的底层机器指令相同。下面分别对两种语法进行简要说明&#xff1a; Intel语法 Intel语法是由I…

有啥办法把百度地图某个点1公里范围内截个图?

点击上方“Python爬虫与数据挖掘”&#xff0c;进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 东方欲晓&#xff0c;莫道君行早。 大家好&#xff0c;我是皮皮。 一、前言 前几天在Python白银交流群【上海新年人】问了一个地图截图的问题&#xff…

513. 找树左下角的值

513. 找树左下角的值 题目链接&#xff1a;513. 找树左下角的值 代码如下&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {…

找不到目标和方向,怎么办?

现代社会里&#xff0c;许多人常见的症状&#xff0c;就是「空心病」。 什么是空心病呢&#xff1f;类似这样&#xff1a; 我知道要有目标&#xff0c;但我就是不知道想做什么&#xff0c;感觉对一切事物都提不起兴趣&#xff0c;没有动力&#xff0c;怎么办&#xff1f; 这个…

【C语言】socketpair 的系统调用

一、 Linux 内核 4.19socketpair 的系统调用 SYSCALL_DEFINE4(socketpair, int, family, int, type, int, protocol,int __user *, usockvec) {return __sys_socketpair(family, type, protocol, usockvec); } 这段代码定义了一个名为 socketpair 的系统调用。系统调用是操作…

Optional对空值的处理

文章目录 前言一、上代码1. isPresent2. ifPresent3. map4. orElse5. orElseGet6. orElseThrow7. optional 总结 前言 Java中最常见的异常就是NullPointerException,空指针的出现不应该影响业务的正常执行,我们应该尽量避免,把异常控制在编码阶段,jdk8为我们提供了Optional&am…

AI算法参数个数本身优化空间

一、背景 AI算法的参数数量并非越多越好&#xff0c;也不是越少越好。参数的数量与模型的复杂度密切相关&#xff1a; 1. 参数多&#xff08;高复杂度模型&#xff09;&#xff1a; - 优点&#xff1a;模型具有更强的表达能力和拟合能力&#xff0c;对于复杂的、非线性的数据分…

C 语言 devc++ 使用 winsock 实现 windows UDP 局域网发送消息

U参考来源 U 这里移植到windows 上 &#xff0c;使用 devc 开发。 服务端代码 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <string.h> #include <winsock2.h>int main() {WORD sockVersion MAKEWORD(2, 2);WSAD…

15.2 OpenGL可编程片段处理:着色器执行

着色器执行 Shader Execution 在片段阶段存在活动的程序对象时&#xff0c;该程序对象的可执行代码用于处理由光栅化产生的传入片段。 实现允许跳过对某些片段着色器调用的执行&#xff0c;并且由于实现相关原因&#xff08;包括在片段着色器阶段不存在活动的程序对象时&…

微服务多级缓存

多级缓存 1.什么是多级缓存 传统的缓存策略一般是请求到达Tomcat后&#xff0c;先查询Redis&#xff0c;如果未命中则查询数据库&#xff0c;如图&#xff1a; 存在下面的问题&#xff1a; •请求要经过Tomcat处理&#xff0c;Tomcat的性能成为整个系统的瓶颈 •Redis缓存…

python-自动化篇-办公-Excel-Openpyxl库

文章目录 1.1 Openpyxl库的安装使用1.2 Excel的新建、读取、保存1.2.1新建保存工作簿1.2.2读取保存工作簿1.2.3实例(批量建新工作表) 1.3工作表对象的获取方法1.3.1工作表获取方式1.3.2实例(批量修改工作表名) 1.4工作表的新建、复制、删除1.4.1新建工作表1.4.2复制工作表1.4.3…

MATLAB实现朴素贝叶斯分类

朴素贝叶斯&#xff08;Naive Bayes&#xff09;是一种基于贝叶斯定理的分类算法&#xff0c;它假设特征之间相互独立&#xff0c;从而简化了计算复杂性。该算法常用于文本分类、垃圾邮件过滤、情感分析等应用场景。 MATLAB实现鸢尾花数据集分类代码如下&#xff1a; clear lo…

2024 前端面试题 附录2

这里记录的是今天原篇的知识点补充 原篇地址&#xff1a;2024 前端面试题&#xff08;GPT回答 示例代码 解释&#xff09;No.21 - No.40 目录 这里记录的是今天原篇的知识点补充原篇地址&#xff1a;[2024 前端面试题&#xff08;GPT回答 示例代码 解释&#xff09;No.21 …

2024 CKS 题库 | 7、Dockerfile检测

不等更新题库 CKS 题库 7、Dockerfile检测 Task 分析和编辑给定的Dockerfile /cks/docker/Dockerfile&#xff08;基于ubuntu:16.04 镜像&#xff09;&#xff0c; 并修复在文件中拥有的突出的安全/最佳实践问题的两个指令。 分析和编辑给定的清单文件 /cks/docker/deployme…

Python·turtle库编程之:怎么画一个五角星?

文章目录 前言源码附&#xff1a; 前言 大家好&#xff0c;我是BoBo仔&#xff0c;这节课我要带来一期turtle库的使用教程——画五角星。话不多说&#xff0c;我们直接上代码。 源码 import turtle as t t.pencolor(yellow) t.fillcolor("yellow") t.penup() t.go…

全栈笔记_插件篇(谷歌扩展插件开发系列之 manifest.json配置文件)

manifest.json介绍 是web扩展技术必不可少的插件配置文件,放在根目录作用: 指定插件的基本信息 name:名称manifest_version:manifest.json文件的版本号,可以写2或3version:版本description:描述定义插件的行为: browser_action:定义插件在浏览器工具栏中的操作按钮,例…

react 【七】各种hooks的使用/SPA的缺点

文章目录 1、Hook1.1 为什么会出现hook1.2 useState1.3 useEffect1.4 useContext1.5 useReducer1.6 useCallback1.7 useMemo1.8 useRef1.8.1 ref绑定dom1.8.2 ref解决闭包缺陷 1.9 useImperativeHandle1.10 useLayoutEffect1.11 自定义Hook1.11.1 什么是自定义Hook1.11.2 Conte…

Rust 数据结构与算法:3栈:用栈实现符号匹配

1、符号匹配 如&#xff1a; (56)(78)/(43)、{ { ( [ ] [ ])}}、(ab)(c*d)func() 等各类语句的符号匹配。 这里我们关注的不是数字而是括号&#xff0c;因为括号更改了操作优先级&#xff0c;限定了语言的语义&#xff0c;这是非常重要的。如果括号不完整&#xff0c;那么整个…

【Deep Learning 1】神经网络的搭建

&#x1f31e;欢迎来到PyTorch的世界 &#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f31f;本文由卿云阁原创&#xff01; &#x1f4c6;首发时间&#xff1a;&#x1f339;2024年2月16日&a…

消息队列RabbitMQ-使用过程中面临的问题与解决思路

消息队列在使用过程中会出现很多问题 首先就是消息的可靠性&#xff0c;也就是消息从发送到消费者接收&#xff0c;消息在这中间过程中可能会丢失 生产者到交换机的过程、交换机到队列的过程、消息队列中、消费者接收消息的过程中&#xff0c;这些过程中消息都可能会丢失。 …