当前位置: 首页 > news >正文

js考核第三题

题三:随机点名

要求: 分为上下两个部分,上方为显示区域,下方为控制区域。显示区域显示五十位群成员的学号和姓名,控制区域由开始和结束两个按钮 组成。点击开始按钮,显示区域里的内容开始滚动,点击结束按钮,内容滚动停止,随机显示一位成员的学号和姓名。

html 部分

<body><div class="display"><ul class="list"></ul></div><div class="anliu"><button class="start">开始</button><button class="stop">结束</button></div>

css部分

<style>body {margin: 0;padding: 0;display: flex;flex-direction: column;height: 100vh;}.display {flex: 1;overflow: hidden;background-color: #f0f0f0;padding: 20px;box-sizing: border-box;position: relative;}@keyframes scroll {0% {top: 0;}100% {top: -100%;}}.list {list-style: none;margin: 0;padding: 0;position: absolute;top: 0;width: 100%;}.list li {padding: 10px;font-size: 18px;border-bottom: 1px solid #ccc;}.anliu {display: flex;justify-content: center;gap: 20px;padding: 20px;background-color: #ddd;}button {padding: 10px 20px;font-size: 16px;cursor: pointer;/*变成小手*/border: none;background-color: green;color: white;border-radius: 5px;}button:hover {background-color: red;}</style>

js部分

<script>document.addEventListener('DOMContentLoaded', function () {const list = document.querySelector('.list');const start = document.querySelector('.start');const stop = document.querySelector('.stop');const yb = [{ id: '23120901', name: '姜怡雯' },{ id: '23210204', name: '付煜舒' },{ id: '23210210', name: '岳含旭' },{ id: '23210310', name: '赵可' },{ id: '23210406', name: '施紫涵' },{ id: '23210408', name: '郑欣妍' },{ id: '23210605', name: '李晶靓' },{ id: '23210606', name: '马诗雨' },{ id: '23210610', name: '杨嘉润' },{ id: '23220125', name: '薛睿' },{ id: '23220204', name: '陆萧彦' },{ id: '23220418', name: '李华勇' },{ id: '23220422', name: '王翰铭' },{ id: '23220426', name: '徐新洪' },{ id: '23220506', name: '张盼' },{ id: '23220607', name: '张婉玉' },{ id: '23220623', name: '王学潮' },{ id: '23220705', name: '石一汝' },{ id: '23220714', name: '高俊宇' },{ id: '23230101', name: '陈思静' },{ id: '23230102', name: '高紫怡' },{ id: '23230103', name: '李嘉慧' },{ id: '23230104', name: '李思怡' },{ id: '23230205', name: '唐艺文' },{ id: '23240101', name: '季雅雯' },{ id: '23240207', name: '吕倩雨' },{ id: '23240301', name: '周婉愉' },{ id: '23240412', name: '郑伯熙' },{ id: '23240426', name: '孙致远' },{ id: '23250316', name: '顾成志' },{ id: '23250411', name: '朱逸倩' },{ id: '23320515', name: '崔齐鑫' },{ id: '24110319', name: '范熠阳' },{ id: '24121002', name: '钱姝澄' },{ id: '24121309', name: '向文杰' },{ id: '24210110', name: '任焯琳' },{ id: '24210119', name: '卜家文' },{ id: '24210214', name: '许成晨' },{ id: '24210319', name: '钱岩' },{ id: '24210414', name: '刘志豪' },{ id: '24210512', name: '郑鸿强' },{ id: '24210609', name: '倪张睿' },{ id: '24210702', name: '冯雅琳' },{ id: '24210704', name: '李晓熙' },{ id: '24210716', name: '魏冕' },{ id: '242108111', name: '盛健翔' },{ id: '24210822', name: '周锦浩' }];function showMembers() {let htmlContent = '';for (let i = 0; i < yb.length; i++) {const currentYb = yb[i];htmlContent += `<li>学号:${currentYb.id},姓名:${currentYb.name}</li>`;}list.innerHTML = htmlContent;}function startScroll() {list.style.animation = 'scroll 1s linear infinite'; }function stopScroll() {list.style.animation = 'none';const randomIndex = Math.floor(Math.random() * yb.length);const randomYb = yb[randomIndex];list.innerHTML = `<li>学号:${randomYb.id},姓名:${randomYb.name}</li>`;}start.addEventListener('click', startScroll);stop.addEventListener('click', stopScroll);showMembers();});</script>

视频:

js第三题

相关文章:

js考核第三题

题三&#xff1a;随机点名 要求&#xff1a; 分为上下两个部分&#xff0c;上方为显示区域&#xff0c;下方为控制区域。显示区域显示五十位群成员的学号和姓名&#xff0c;控制区域由开始和结束两个按钮 组成。点击开始按钮&#xff0c;显示区域里的内容开始滚动&#xff0c;…...

新型基于Go语言的恶意软件利用Telegram作为C2通信渠道

研究人员发现了一种新型后门恶意软件&#xff0c;使用Go语言编写&#xff0c;并利用Telegram作为其命令与控制&#xff08;C2&#xff09;通信渠道。尽管该恶意软件似乎仍处于开发阶段&#xff0c;但它已经具备完整的功能&#xff0c;能够执行多种恶意活动。这种创新的C2通信方…...

【Python 语法】Python 正则表达式(regular expressions, regex)

1. 基本语法1.1 字符匹配1.2 元字符1.3 特殊字符1.4 分组和捕获1.5 断言2. 常用函数2.1 `re.match()`2.2 `re.search()`2.3 `re.findall()`2.4 `re.sub()`2.5 `re.split()`3. 进阶用法3.1 捕获组3.2 非捕获组3.3 预查Python 中的**正则表达式(regular expressions, regex)**是…...

STM32 如何使用DMA和获取ADC

目录 背景 ‌摇杆的原理 程序 端口配置 ADC 配置 DMA配置 背景 DMA是一种计算机技术&#xff0c;允许某些硬件子系统直接访问系统内存&#xff0c;而不需要中央处理器&#xff08;CPU&#xff09;的介入&#xff0c;从而减轻CPU的负担。我们可以通过DMA来从外设&#xf…...

【原创】vue-element-admin-plus完成编辑页面中嵌套列表功能

前言 vue-element-admin-plus对于复杂业务的支持程度确实不怎么样&#xff0c;我这里就遇到了编辑页面中还要嵌套列表的真实案例&#xff0c;比如字典&#xff0c;主字典嵌套子信息&#xff0c;类似于一个树状结构。目前vue-element-admin-plus给出的例子是无法满足这个需求的…...

Java零基础入门笔记:(3)程序控制

前言 本笔记是学习狂神的java教程&#xff0c;建议配合视频&#xff0c;学习体验更佳。 【狂神说Java】Java零基础学习视频通俗易懂_哔哩哔哩_bilibili Scanner对象 之前我们学的基本语法中我们并没有实现程序和人的交互&#xff0c;但是Java给我们提供了这样一个工具类&…...

拷打,数据库面经!

数据库必会面试题 1. 请解释数据库中的MVCC&#xff08;多版本并发控制&#xff09;机制&#xff0c;并说明其在MySQL InnoDB中的具体实现方式&#xff1f; 答案&#xff1a; MVCC是一种通过维护数据的历史版本实现高并发的技术&#xff0c;允许读操作不阻塞写操作&#xff0…...

Docker+DockerCompose+Harbor安装

安装docker # 安装yum工具 yum install yum-utils -y# 配置yum源 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo# 安装docker yum install -y docker-ce-25.0.3 docker-ce-cli-25.0.3 containerd.io# 加载镜像 systemctl d…...

论文笔记(七十二)Reward Centering(一)

Reward Centering&#xff08;一&#xff09; 文章概括摘要1 奖励中心化理论 文章概括 引用&#xff1a; article{naik2024reward,title{Reward Centering},author{Naik, Abhishek and Wan, Yi and Tomar, Manan and Sutton, Richard S},journal{arXiv preprint arXiv:2405.0…...

在springboot加vue项目中加入图形验证码

后端 首先先要创建一个CaptchaController的类&#xff0c;可以在下面的代码中看到 在getCaptcha的方法里面写好了生成随机的4位小写字母或数字的验证码&#xff0c;然后通过BufferedImage类变为图片&#xff0c;顺便加上了干扰线。之后把图片转为Base64编码方便传给前端 为了…...

【系列专栏】银行IT的云原生架构-存储架构-数据库部署 10

银行 IT 的云原生架构&#xff1a;存储架构&#xff08;数据库部署&#xff09; 一、引言 在银行 IT 云原生架构的构建中&#xff0c;存储架构作为关键支撑&#xff0c;其性能、可靠性和扩展性直接影响着银行各类业务系统的运行效率与数据安全。而数据库作为数据存储与管理的…...

OpenGL ES -> 投影变换矩阵完美解决绘制GLSurfaceView绘制图形拉伸问题

GLSurfaceView绘制图形拉伸问题 假如在XML文件中声明GLSurfaceView的宽高为 android:layout_width"match_parent"android:layout_height"match_parent GLSurfaceView绘制的图形在Open GL ES坐标系中&#xff0c;而Open GL ES坐标系会根据GLSurfaceView的宽高将…...

【Three.js】JS 3D library(一个月进化史)

#春节过完了&#xff0c;该继续投入学习了~ 作为一个平面开发者&#xff0c;想要增进更多的技能&#xff0c;掌握web3D开发# 前置知识与技能 1. JavaScript 基础 - 掌握ES6语法&#xff08;类、模块、箭头函数、解构等&#xff09; - 熟悉异步编程&#xff08;Promise、…...

在 debian 12 上安装 mysqlclient 报错

报错如下 Looking in indexes: https://pypi.tuna.tsinghua.edu.cn/simple Collecting mysqlclientUsing cached https://pypi.tuna.tsinghua.edu.cn/packages/61/68/810093cb579daae426794bbd9d88aa830fae296e85172d18cb0f0e5dd4bc/mysqlclient-2.2.7.tar.gz (91 kB)Installi…...

wordpress主题插件开发中高频使用的38个函数

核心模板函数 get_header()/get_footer()/get_sidebar() – 加载模板部件 the_title()/the_content()/the_excerpt() – 显示文章标题、内容、摘要 the_post() – 循环中获取文章数据 bloginfo(‘url’) – 获取站点URL wp_head()/wp_footer() – 输出头部/尾部代码 wp_n…...

BMS项目-面试及答疑整理

1. SOC计算用的什么原理实现的? bms目前计算SOC使用的安时积分+开路电压首先得对电池有一个抽象得概念,把电池比作游泳池,电量比作游泳池里面的水,电流比作流入和流出得水流,那么充电也就是往游泳池里面灌入水流安时积分:对水流进行一个实时监测,比如1S一次监测,那么每…...

js第十二题

题十二&#xff1a;轮播图 要求&#xff1a; 1.鼠标不在图片上方时&#xff0c;进行自动轮播&#xff0c;并且左右箭头不会显示&#xff1b;当鼠标放在图片上方时&#xff0c;停止轮播&#xff0c;并且左右箭头会显示&#xff1b; 2.图片切换之后&#xff0c;图片中下方的小…...

LeetCode-76.最小覆盖子串

1、题目描述&#xff1a; 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 "" 。 注意&#xff1a; 对于 t 中重复字符&#xff0c;我们寻找的子字符串中该字符数量必须…...

CAS单点登录(第7版)20.用户界面

如有疑问&#xff0c;请看视频&#xff1a;CAS单点登录&#xff08;第7版&#xff09; 用户界面 概述 概述 对 CAS 用户界面 &#xff08;UI&#xff09; 进行品牌化涉及编辑 CSS 样式表以及一小部分相对简单的 HTML 包含文件&#xff0c;也称为视图。&#xff08;可选&…...

【强化学习的数学原理】第08课-值函数近似-笔记

学习资料&#xff1a;bilibili 西湖大学赵世钰老师的【强化学习的数学原理】课程。链接&#xff1a;强化学习的数学原理 西湖大学 赵世钰 文章目录 一、例子&#xff1a;曲线拟合二、原理-目标函数介绍三、原理-优化算法和函数选择四、原理-示例与分析五、Sarsa和Q-learning六、…...

基于css实现正六边形的三种方案

方案一&#xff1a;通过旋转三个长方形生成正六边形 分析&#xff1a; 如下图所示&#xff0c;我们可以通过旋转三个长方形来得到一个正六边形。疑问&#xff1a; 1. 长方形的宽高分别是多少&#xff1f; 设正六边形的边长是100&#xff0c;基于一些数学常识&#xff0c;可以…...

React VS Vue

React 和 Vue 是目前最流行的两个前端框架&#xff0c;它们在设计理念、生态系统和开发体验上各有特点。以下是对 React 和 Vue 的全方位对比&#xff1a; 1. 核心设计理念 React 库而非框架&#xff1a;React 是一个用于构建 UI 的库&#xff0c;专注于视图层&#xff0c;其…...

CMake 编译工具

在使用 CMake 时&#xff0c;你可以通过指定工具链文件来设置编译器&#xff08;如 GCC、G 或 Clang&#xff09;。以下是具体步骤&#xff1a; 1. 创建工具链文件 首先&#xff0c;创建一个工具链文件&#xff08;例如 toolchain.cmake&#xff09;&#xff0c;并在其中指定…...

el-tree选中数据重组成树

vueelement-ui 实现el-tree选择重新生成一个已选中的值组成新的数据树&#xff0c;效果如下 <template><div class"flex"><el-tree class"tree-row" :data"list" ref"tree" :props"{children: children, label: …...

IO、NIO解读和不同点,以及常用的文件流操作方法

java高级——IO、NIO解读和不同点&#xff0c;以及常用的文件流操作方法 前情提要文章介绍1. 什么是IO1.1 节点的分类1.2 传输方式 2. 七大传输方式解读2.1 File类解读2.1.1 创建文件的三种方式2.2.2 File的常用方法2.2.3 如何正确认识FileUtils 2.2 字节流&#xff08;核心&am…...

51单片机-按键

1、独立按键 1.1、按键介绍 轻触开关是一种电子开关&#xff0c;使用时&#xff0c;轻轻按开关按钮就可使开关接通&#xff0c;当松开手时&#xff0c;开关断开。 1.2、独立按键原理 按键在闭合和断开时&#xff0c;触点会存在抖动现象。P2\P3\P1都是准双向IO口&#xff0c;…...

Spring Boot Actuator 监控✨

Spring Boot Actuator 是 Spring Boot 提供的一个强大的监控和管理工具&#xff0c;它可以帮助你深入了解和监控你的应用程序的运行状态。通过 Actuator&#xff0c;你可以获取应用程序的健康状况、内存使用情况、线程信息、HTTP 请求跟踪等。&#x1f680; 核心知识点 &#…...

SpringBoot论坛网站 – 功能详解与部署教程

项目概述 《SpringBoot的论坛网站》是一个基于SpringBoot框架开发的现代化论坛平台&#xff0c;旨在为用户提供一个便捷的交流空间。该项目不仅功能丰富&#xff0c;还具备良好的扩展性和易用性&#xff0c;适合用于学习、分享和讨论各类话题。以下是项目的核心功能模块和部署…...

俄罗斯方块游戏完整代码示例

以下是一个基于Cocos Creator引擎开发的俄罗斯方块游戏的完整代码示例。该游戏实现了俄罗斯方块的基本功能&#xff0c;并且代码整合在单个文件中&#xff0c;无需任何外部依赖&#xff0c;可以直接在浏览器中运行。 1. 创建Cocos Creator项目 首先&#xff0c;确保你已经安装了…...

【设计模式】【结构型模式】组合模式(Composite)

&#x1f44b;hi&#xff0c;我不是一名外包公司的员工&#xff0c;也不会偷吃茶水间的零食&#xff0c;我的梦想是能写高端CRUD &#x1f525; 2025本人正在沉淀中… 博客更新速度 &#x1f44d; 欢迎点赞、收藏、关注&#xff0c;跟上我的更新节奏 &#x1f3b5; 当你的天空突…...

【设计模式】03-理解常见设计模式-行为型模式(专栏完结)

前言 前面我们介绍完创建型模式和创建型模式&#xff0c;这篇介绍最后的行为型模式&#xff0c;也是【设计模式】专栏的最后一篇。 一、概述 行为型模式主要用于处理对象之间的交互和职责分配&#xff0c;以实现更灵活的行为和更好的协作。 二、常见的行为型模式 1、观察者模…...

Qt 6.8版本 自制windows下运行软件<一>——串口调试助手

自制串口调试助手 哔哩哔哩效果展示 一、 说明 本人在读学生&#xff0c;跟随哔哩哔哩网站北京迅为公司的教学视频&#xff0c;进行学习qt&#xff0c;由于视频中的实现过程是利用ui界面的实现&#xff0c;本人在学习过程中&#xff0c;通过完全敲代码的形式&#xff0c;实现同…...

Qt——静态函数中发送信号方法总结(不需要通过类内部信号与槽实现,关键是清楚你发送的信号源自哪个对象)

【系列专栏】:博主结合工作实践输出的,解决实际问题的专栏,朋友们看过来! 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C++语言开发基础总结》 《从0到1学习嵌入式Linux开发》 《QT开发实战》 《Android开发实战》...

深入解析 vLLM:高性能 LLM 服务框架的架构之美(一)原理与解析

修改内容时间2.4.1处理请求的流程&#xff0c;引用更好的流程图2025.02.11首发2025.02.08 深入解析 vLLM&#xff1a;高性能 LLM 服务框架的架构之美&#xff08;一&#xff09;原理与解析 深入解析 vLLM&#xff1a;高性能 LLM 服务框架的架构之美&#xff08;二&#xff09;…...

关于视频去水印的一点尝试

一. 视频去水印的几种方法 1. 使用ffmpeg delogo滤镜 delogo 滤镜的原理是通过插值算法&#xff0c;用水印周围的像素填充水印的位置。 示例&#xff1a; ffmpeg -i input.mp4 -filter_complex "[0:v]delogox420:y920:w1070:h60" output.mp4 该命令表示通过滤镜…...

前端常见面试题-2025

vue4.0 Vue.js 4.0 是在 2021 年 9 月发布。Vue.js 4.0 是 Vue.js 的一个重要版本&#xff0c;引入了许多新特性和改进&#xff0c;旨在提升开发者的体验和性能。以下是一些关键的更新和新特性&#xff1a; Composition API 重构&#xff1a;Vue 3 引入了 Composition API 作为…...

JavaEE-SpringBoot快速入门

文章目录 本节目标Maven什么是Maven创建一个Maven项目maven项目功能maven的依赖管理全球仓库, 私服, 本地服务器, 配置国内镜像 第一个SpringBoot项目创建项目运行SpringBoot程序 SpringBoot原理初步Web服务器 总结 本节目标 了解什么是maven, 配置国内源使用Springboot创建项…...

盛铂科技 SMF106 低相位噪声贴片式频率综合器模块

在现代通信和电子设备领域&#xff0c;频率综合器作为关键组件&#xff0c;其性能优劣直接影响系统的整体表现。盛铂科技的 SMF106 低相位噪声贴片式频率综合器&#xff0c;以其卓越的性能和独特设计&#xff0c;成为众多高性能系统的选择。 一、频率覆盖范围广&#xff0c;步进…...

前端【技术方案】重构项目

1. 明确重构目标 优化性能 减少页面加载时间降低资源占用 提升代码可维护性 更规范的代码风格更清晰的代码结构更明确的模块设计 扩展功能 为项目添加新功能改进现有功能 2. 评估项目现状 审查代码 全面检查现有代码&#xff0c;找出代码中的问题&#xff0c;如代码冗余、耦合…...

第十六天 HarmonyOS WebView开发实战:从加载网页到与JavaScript交互

HarmonyOS WebView开发实战&#xff1a;从加载网页到与JavaScript交互 一、WebView基础与HarmonyOS特性解析 在移动应用开发中&#xff0c;WebView作为内嵌浏览器组件&#xff0c;在HarmonyOS&#xff08;鸿蒙系统&#xff09;中扮演着重要角色。它不仅能够加载本地和远程网页…...

Unity学习part2

为bilibili教程【【Unity教程】零基础带你从小白到超神】 https://www.bilibili.com/video/BV1gQ4y1e7SS/?p50&share_sourcecopy_web&vd_source6e7a3cbb802eb986578ad26fae1eeaab的笔记 1、灯光的使用 定向光模拟太阳&#xff0c;是平行光。旋转定向光&#xff0c;光…...

贪吃蛇游戏

贪吃蛇 一、html <div class"container" id"app"></div><script src"./js/index.js"></script>二、css * {margin: 0;top: 0;} .set {margin: 15px auto;width: 600px; } .container {width: 600px;height: 600px;bac…...

docker修改镜像默认存储路径(基于 WSL2 的迁移方法)

打开powershell窗口 任意地方shift右键 1、停止 WSL wsl --shutdown2、导出数据 wsl --export docker-desktop-data E:\docker\DockerDesktopdata\docker-desktop-data.tar wsl --export docker-desktop E:\docker\DockerDesktop\docker-desktop.tar3、取消注册 wsl --un…...

C#+SqlSugar实现主从库读写分离

在使用 **SqlSugar** 进行分库操作时&#xff0c;可以通过配置多个数据库连接&#xff0c;并根据业务逻辑动态切换数据库。以下是一个完整的分库示例&#xff0c;展示如何实现分库功能。 --- ### **1. 安装 NuGet 包** 安装 SqlSugarCore&#xff1a; bash dotnet add packag…...

从无序到有序:上北智信通过深度数据分析改善会议室资源配置

当前企业普遍面临会议室资源管理难题&#xff0c;预约机制不完善和临时会议多导致资源调度不合理&#xff0c;既有空置又有过度拥挤现象。 针对上述问题&#xff0c;上北智信采用了专业数据分析手段&#xff0c;巧妙融合楼层平面图、环形图、折线图和柱形图等多种可视化工具&a…...

以太网详解(八)传输层协议:TCP/UDP 协议

文章目录 传输层协议概述为什么需要传输层&#xff1f;传输层功能网络层与传输层在实现 “端到端” 传输的异同两类服务:面向连接/无连接服务 传输控制协议 TCPTCP 协议数据单元格式TCP 的重传机制快重传和快恢复快重传举例快恢复算法 用户数据报协议 UDPUDP 概述UDP 基本工作过…...

CentOS 8 配置bond

CentOS 8 网络配置的详细步骤和对应的配置文件内容。 1. 配置聚合网卡(Bonding) 配置intranet聚合网卡 在/etc/sysconfig/network-scripts/目录下创建ifcfg-intranet文件,内容如下: TYPE=Bond NAME=intranet DEVICE=intranet ONBOOT=yes BOOTPROTO=none IPADDR=10.2.1.22…...

C语言基础16:二维数组、字符数组

二维数组 定义 二维数组本质上是一个行列式的组合&#xff0c;也就是说二维数组由行和列两部分组成。属于多维数组&#xff0c;二维数组数据是通过行列进行解读。 二维数组可被视为一个特殊的一维数组&#xff0c;相当于二维数组又是一个一维数组&#xff0c;只不过它的元素…...

Java 同步锁性能的最佳实践:从理论到实践的完整指南

目录 一、同步锁性能分析 &#xff08;一&#xff09;性能验证说明 1. 使用同步锁的代码示例 2. 不使用同步锁的代码示例 3. 结果与讨论 &#xff08;二&#xff09;案例初步优化分析说明 1. 使用AtomicInteger原子类尝试优化分析 2. 对AtomicInteger原子类进一步优化 …...

思科、华为、H3C常用命令对照表

取消/关闭 思科no华为undo华三undo 查看 思科show华为display华三display 退出 思科exit华为quit华三quit 设备命名 思科hostname华为sysname华三sysname 进入全局模式 思科enable、config terminal华为system-view华三system-view 删除文件 思科delete华为delete华…...