当前位置：首页 > article >正文

js考核第三题

article 2026/4/20 3:24:11

题三：随机点名

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

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考核第三题

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

编程日记 2026/2/19 20:15:00

【第4章：循环神经网络（RNN）与长短时记忆网络（LSTM）— 4.6 RNN与LSTM的变体与发展趋势】

引言：时间序列的魔法钥匙在时间的长河中，信息如同涓涓细流，绵延不绝。而如何在这无尽的数据流中捕捉、理解和预测，正是循环神经网络（RNN）及其变体长短时记忆网络（LSTM）所擅长的。今天，我们就来一场深度探索，揭开RNN与LSTM的神秘面纱，看看它们如何在时间序列的海洋…...

编程日记 2026/4/6 20:09:15

简单几个步骤完成 Oracle 到金仓数据库（KingbaseES）的迁移目标

作为国产数据库的领军选手，金仓数据库（KingbaseES）凭借其成熟的技术架构和广泛的市场覆盖，在国内众多领域中扮演着至关重要的角色。无论是国家电网、金融行业，还是铁路、医疗等关键领域，金仓数据库都以其卓…...

编程日记 2026/4/7 1:10:48

Java和JavaScript当中的json对象和json字符串分别讲解

Java和JavaScript当中的json对象和json字符串分别讲解一、Java当中的json对象和json字符串在 Java 中，JSON 对象和 JSON 字符串有不同的表示和操作方式。 1. JSON 对象： 如果你使用的是 org.json 库，创建 JSON 对象的代码如下&#xff1…...

编程日记 2026/4/16 14:43:45

【第11章：生成式AI与创意应用—11.2 音频与音乐生成的探索与实践】

凌晨三点的录音棚里，制作人小林对着空荡荡的混音台抓狂——广告方临时要求将电子舞曲改编成巴洛克风格，还要保留"赛博朋克"元素。当他在AI音乐平台输入"维瓦尔弟遇见霓虹灯"的瞬间，一段融合羽管键琴与合成器的奇妙旋律喷涌而出，这场人与机器的音乐狂想…...

编程日记 2026/4/15 12:49:18

八、SPI读写XT25数据

8.1 SPI 简介 SPI（Serial Peripheral Interface，串行外设接口）是一种同步串行通信协议，广泛用于嵌入式系统中连接微控制器与外围设备，如传感器、存储器、显示屏等。主要特点 1. 全双工通信：支持同时发送…...

编程日记 2026/4/17 7:29:00

Visionpro 齿轮测量

效果展示一、题目要求求出最大值，最小值，平均值二、分析 1.首先要进行模板匹配 2.划清匹配范围 3.匹配小三角的模板匹配 4.卡尺 5.用找圆工具工具 1.CogPMAlignTool 2.CogCaliperTool 3.CogFindCircleTool 4.CogFixtureTool 三、模板匹…...

编程日记 2026/4/11 22:10:57

Ubuntu20.04部署stable-diffusion-webui环境小记

Ubuntu20.04部署stable-diffusion-webui环境小记文章目录前言后视镜视角查看安装文档聊聊我踩的那些坑python3.11的安装执行sudo apt update报错显卡驱动内存优化网络问题无法打开系统设置和网络设置查询GPU使用情况总结 Stable Diffusion web UI A web interface for Stabl…...

编程日记 2026/4/18 14:04:50

索引以及索引底层数据结构

一、什么是索引？ 索引（index）是数据库高效获取数据的数据结构（有序）。在数据之外，数据库系统还维护着满足特定查找算法的数据结构（B树），这些数据结构以某种方式指向真在…...

编程日记 2026/4/7 22:28:21

开业盛典活动策划方案拆解

道叔来给大家详细剖析咱们方案库里刚收录的这份《蜀大侠火锅店武侠风开业盛典活动策划方案》了，保证让你看完直呼过瘾，收获满满！ 一、主题创意：武侠风，直击人心首先，咱们得夸一下这活动的主题——“XXX‘…...

编程日记 2026/4/12 22:40:04

API 接口自动化

HTTP协议 - 白月黑羽 HTTP协议简介如果客户端是浏览器，如何在chrome浏览器中查看请求和响应的HTTP消息？按f12-》network 清除当前信息响应的消息体在Response里看点preview，可以看响应的消息体展开的格式 HTTP请求消息请求头 reques…...

编程日记 2026/4/3 2:32:57

安全测试|SSRF请求伪造

前言 SSRF漏洞是一种在未能获取服务器权限时，利用服务器漏洞，由攻击者构造请求，服务器端发起请求的安全漏洞，攻击者可以利用该漏洞诱使服务器端应用程序向攻击者选择的任意域发出HTTP请求。很多Web应用都提供了从其他的服务器上…...

编程日记 2026/4/16 19:13:55

ML.NET库学习008：使用ML.NET进行心脏疾病预测模型开发

文章目录 ML.NET库学习008：使用ML.NET进行心脏疾病预测模型开发1. 项目主要目的和原理2. 项目概述实现的主要功能：主要流程步骤：关键技术： 3. 主要功能和步骤数据加载与路径处理模型训练与评估模型保存与加载 4. 代码中的数据结构…...

编程日记 2026/4/17 6:30:32

了解rtc_time64_to_tm()和rtc_tm_to_time64()

rtc_time64_to_tm()和rtc_tm_to_time64()主要用于RTC的驱动程序，在Linux外部RTC驱动中较常见。打开“drivers/rtc/lib.c” /* * rtc_time64_to_tm - Converts time64_t to rtc_time. * Convert seconds since 01-01-1970 00:00:00 to Gregorian date. */ //将ti…...

编程日记 2026/4/8 22:25:38

verilog程序设计及SystemVerilog验证

1.Verilog测试程序设计基础 1.1Testbench及其结构在仿真的时候Testbench用来产生测试激励给待验证设计( Design Under Verification, DUV)，或者称为待测设计(Design UnderTest, DUT) 。测试程序的一般结构： Testbench是一个测试平台，信号…...

编程日记 2026/3/28 5:27:52

智能编程助手功能革新与价值重塑之：GitHub Copilot

引言： GitHub Copilot 的最新更新为开发者带来了显著变化，其中 Agent Mode 功能尤为引人注目。该模式能够自动识别并修复代码错误、自动生成终端命令，并具备多级任务推理能力，这使得开发者在开发复杂功能时，可大幅减少…...

编程日记 2026/4/17 10:04:03

物联网行业通识：从入门到深度解析

物联网行业通识：从入门到深度解析 （图1：物联网生态示意图） 一、引言：万物互联时代的到来根据IDC最新预测，到2025年全球物联网设备连接数将突破410亿，市场规模达1.1万亿美元。物联网&#xff…...

编程日记 2026/4/2 22:42:52

ABP - 事件总线之分布式事件总线

ABP - 事件总线之分布式事件总线 1. 分布式事件总线的集成1.2 基于 RabbitMQ 的分布式事件总线 2. 分布式事件总线的使用2.1 发布2.2 订阅2.3 事务和异常处理 3. 自己扩展的分布式事件总线实现事件总线可以实现代码逻辑的解耦，使代码模块之间功能职责更清晰。而分布…...

编程日记 2026/4/1 13:03:06

【硬件设计细节】缓冲驱动器使用注意事项

一、缓冲驱动器核心功能与选型原则信号增强与隔离驱动能力匹配：根据负载电流需求选择缓冲器，例如CMOS缓冲器驱动能力通常为4-8mA，需搭配大电流负载时选用图腾柱输出或专用驱动芯片（如TI的SN74LVC系列）。电压域转换&…...

编程日记 2026/4/14 4:53:18

驱动开发系列38 - Linux Graphics 3D 绘制流程（一）- 创建画布

一：概述当应用程序创建 OpenGL 上下文时，它通常需要申请帧缓冲（Framebuffer，即画布）。在 X11 体系下，应用程序不会直接向内核的 DRM 模块请求创建帧缓冲，而是通过 X 服务器进行申请。虽然从技术上讲，应用程序可以直接使用 DRM 接口创建帧缓冲对象（BO），但为了将其与…...

编程日记 2026/2/19 23:42:20

再谈SpringCloud Gateway源码

再谈SpringCloud Gateway源码一、整体请求流程二、前置对象准备1、实例化HandlerMapping2、实例化Route3、实例化WebHandler 三、实践业务扩展点1、定义扩展Route对象2、Filter能做什么3、定义扩展Filter对象4、定义父类Filter简化请求参数处理前言： 之前有阅读过…...

编程日记 2026/4/4 10:17:51

把 CSV 文件摄入到 Elasticsearch 中 - CSVES

在我们之前的很多文章里，我有讲到这个话题。在今天的文章中，我们就提重谈。我们使用一种新的方法来实现。这是一个基于 golang 的开源项目。项目的源码在 https://github.com/githubesson/csves/。由于这个原始的代码并不支持 basic security 及带有安全…...

编程日记 2026/4/11 14:37:22

3.【线性代数】——矩阵乘法和逆矩阵

三矩阵乘法和逆矩阵 1. 矩阵乘法1.1 常规方法1.2 列向量组合1.3 行向量组合1.4 单行和单列的乘积和1.5 块乘法 2. 逆矩阵2.1 逆矩阵的定义2.2 奇异矩阵2.3 Gauss-Jordan 求逆矩阵2.3.1 求逆矩阵 ⟺ \Longleftrightarrow ⟺解方程组2.3.2 Gauss-Jordan求逆矩阵 1. 矩阵乘法 1.…...

编程日记 2026/2/18 19:25:28

SpringCloud面试题----如何对 Spring Cloud 微服务进行性能优化

架构层面合理划分微服务单一职责原则：确保每个微服务只负责单一的业务功能，这样可以降低服务的复杂度，提高可维护性和可扩展性。例如，将用户认证、订单管理、商品管理等不同功能拆分成独立的微服务。避免服务间过度耦合：减少微服务之间的依赖关系，避免因为某个服务的变…...

编程日记 2026/4/1 5:20:49

使用llama.cpp在gpu和cpu上运行deepseek-r1 7b的性能对比

使用deepseek-r1 7b模型的q5km量化版本进行测试, gpu上的token解码速度是cpu的近8倍. 测试环境: ubuntu22.04 x86llama.cpp cpu intel 10750h 4.41 tokens / s model size params backend threads test t/s qwen2 7B Q5_K - Medium 5.07 GiB 7.62 B CPU 6 pp512 …...

编程日记 2026/4/17 21:12:12

BMS项目-面试及答疑整理

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

编程日记 2026/3/24 17:20:08

【virtiofs】ubuntu24.04+qemu7.0调试virtiofs

文章目录编译qemu编译buildroot编译linux-6.8.1编译virtiofsd启动脚本qemu调试方法环境： win11 + vmware17 ubuntu24.04 buildroot git clone git://git.busybox.net/buildroot linux-6.8.1 https://mirrors.edge.kernel.org/pub/linux/kernel/v6.x/linux-6.8.1.tar.gz virti…...

编程日记 2026/2/17 16:39:00

【第2章：神经网络基础与实现——2.1 前馈神经网络的结构与工作原理】

老铁们好！今天我们要来一场长达两万字的超详细技术探险，我会像拆解乐高积木一样把前馈神经网络（Feedforward Neural Network）的每个零件摆在台面上，用最接地气的方式让你彻底搞懂这个深度学习基石的工作原理。准备好了吗？我们开始吧！第一章：神经网络的 “乐高积木” 1…...

编程日记 2026/4/15 4:36:22

ARINC 429详解

ARINC 429 是航空电子系统中广泛应用的一种串行数据总线标准，由航空无线电公司（ARINC）于1977年制定（ARINC 429规范）。它定义了航空电子设备之间数据传输的电气特性、协议格式和通信规则，是民航和军用飞机中…...

编程日记 2025/12/3 5:03:48

C进阶数据的存储

目录前言一，VS的知识储备二，有趣的scanf()读取三，数据的存储引言四，整数存储五，小数存储总结前言这里将深入计算机，看计算机是如何进行数据的存储的，怎么在计算机里面筑巢为…...

编程日记 2026/4/15 0:54:12

相关文章：