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

js考核第三题

news 2026/2/9 1:46:08

题三：随机点名

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

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;…...

编程日记 2025/2/15 17:09:52

LabVIEW袜品压力测试系统

开发了一种基于LabVIEW开发的袜品压力测试系统。该系统利用LabVIEW并结合灵敏的传感器和高精度的处理模块&#xff0c;实现了对袜品压力的精确测量和分析。系统不同于传统的服装压力测试方法&#xff0c;为研究和评价袜子的舒适性提供了新的测试手段。 ​ 项目背景 该系统的…...

编程日记 2025/2/15 17:07:48

jsp页面跳转失败

今天解决一下jsp页面跳转失败的问题 在JavaWeb的学习过程中&#xff0c;编写了这样一段代码&#xff1a; <html> <body> <h2>Hello World!</h2><%--这里提交的路径&#xff0c;需要寻找到项目的路径--%> <%--${pageContext.request.context…...

编程日记 2025/2/15 17:04:43

1.推荐算法基本概念

推荐算法是一个非常重要且广泛应用的领域&#xff0c;特别是在电子商务、社交媒体、内容推荐等领域。第一课我们将介绍推荐算法的基本概念和分类&#xff0c;并简单讲解两种常见的推荐算法&#xff1a;协同过滤和基于内容的推荐。 推荐算法的基本概念 推荐系统的目标是根据用…...

编程日记 2025/2/15 17:02:41

Java 大视界 -- 大数据伦理与法律：Java 技术在合规中的作用与挑战（87）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

编程日记 2025/2/15 16:57:33

【ISO 14229-1:2023 UDS诊断全量测试用例清单系列：第十五节】

ISO 14229-1:2023 UDS诊断服务测试用例全解析&#xff08;RoutineControl_0x31服务&#xff09; 作者&#xff1a;车端域控测试工程师 更新日期&#xff1a;2025年02月14日 关键词&#xff1a;UDS协议、0x31服务、例程控制、ISO 14229-1:2023、ECU测试 一、服务功能概述 0x31服…...

编程日记 2025/2/15 16:56:30

【深度强化学习】策略梯度算法：REINFORCE

策略梯度 强化学习算法进阶 Q-learning、DQN 及 DQN 改进算法都是基于价值&#xff08;value-based&#xff09;的方法&#xff0c;其中 Q-learning 是处理有限状态的算法&#xff0c;而 DQN 可以用来解决连续状态的问题。在强化学习中&#xff0c;除了基于值函数的方法&#…...

编程日记 2025/2/15 16:55:21

手机用流量怎样设置代理ip?

互联网各领域资料分享专区(不定期更新)&#xff1a; Sheet...

编程日记 2025/2/15 16:53:15

CI/CD部署打包方法

项目目前部署方式&#xff1a; 各地区服务器打包同一个runner&#xff08;需要互相排队&#xff0c;不并发&#xff09;各地区客户端可以并发打包&#xff0c;同个地区客户端打多个包需要排队 部署方法 下载gitlab-runner&#xff1a; https://docs.gitlab.com/runner/insta…...

编程日记 2025/2/15 16:52:12

LabVIEW 中dde.llbDDE 通信功能

在 LabVIEW 功能体系中&#xff0c;位于 C:\Program Files (x86)\National Instruments\LabVIEW 2019\vi.lib\Platform\dde.llb 的 dde.llb 库占据着重要的地位。作为一个与动态数据交换&#xff08;DDE&#xff09;紧密相关的库文件&#xff0c;它为 LabVIEW 用户提供了与其他…...

编程日记 2025/2/15 16:51:08

探索后端开发中的异步API：基于Resilience4j与Reactive Programming的高性能设计

引言 随着微服务架构的普及&#xff0c;后端系统面临的挑战愈发严峻&#xff0c;尤其是在高并发和高可用性方面。传统的同步调用模式虽然简单&#xff0c;但在处理大量并发请求时可能会成为瓶颈。为了应对这一问题&#xff0c;异步编程逐渐成为后端开发的热门话题。 在本文中…...

编程日记 2025/2/15 16:49:01

leetcode 2915. 和为目标值的最长子序列的长度

题目如下 数据范围 本题就是典型的背包问题target就是容量&#xff0c;nums[i]就是第i个物品的重量。其实就是选最多的物品使得背包刚好装满。 令f(i,j)为当考虑到i - 1物品时刚好装到j重量的物品数。 当j > nums[j]时 有f(i,j) max(f(i - 1,j - nums[i - 1]) 1,f(i -…...

编程日记 2025/2/15 16:47:55

【Vue】打包vue3+vite项目发布到github page的完整过程

文章目录 第一步&#xff1a;打包第二步&#xff1a;github仓库设置第三步&#xff1a;安装插件gh-pages第四步&#xff1a;两个配置第五步&#xff1a;上传github其他问题1. 路由2.待补充 参考文章&#xff1a; 环境&#xff1a; vue3vite windows11&#xff08;使用终端即可&…...

编程日记 2025/2/15 16:46:52

Flutter编译问题记录

问题&#xff1a; 运行出现以下报错 Launching lib/main.dart on macOS in debug mode... Warning: CocoaPods not installed. Skipping pod install. CocoaPods is a package manager for iOS or macOS platform code. Without CocoaPods, plugins will not work on iOS or …...

编程日记 2025/2/15 16:45:47

poetry shell - 作为插件安装和使用

安装插件 安装完 poetry&#xff0c;想进入环境&#xff0c;执行 poetry shell 后会报错&#xff0c;是因为 poetry shell 在后面的版本中&#xff0c;是作为插件&#xff0c;需要额外安装。 poetry self add poetry-plugin-shell关于 poetry-plugin-shell github : https:/…...

编程日记 2025/2/15 16:44:42

UE5中的快捷键汇总

以下是Unreal Engine 5&#xff08;UE5&#xff09;中一些常用的快捷键大全&#xff0c;涵盖编辑器操作、视口导航、蓝图编辑等多个方面(会持续补充作为笔记存在)&#xff1a; 通用快捷键 快捷键功能Ctrl S保存当前关卡Ctrl Shift S保存所有Ctrl Z撤销Ctrl C复制Ctrl V…...

编程日记 2025/2/15 16:43:40

2月14（信息差）

&#x1f30d;杭州&#xff1a;全球数贸港核心区建设方案拟出台 争取国家支持杭州在网络游戏管理给予更多权限 &#x1f384;Kimi深夜炸场&#xff1a;满血版多模态o1级推理模型&#xff01;OpenAI外全球首次&#xff01;Jim Fan&#xff1a;同天两款国产o1绝对不是巧合&#x…...

编程日记 2025/2/15 16:42:35

ElementUI 的组件 Switch（开关）如何让文字显示在按钮上

效果图&#xff1a; 一、引入switch组件 给组件自定义一个类&#xff1a;tableScopeSwitch&#xff0c;设置开关的值和对应展示的文字&#xff08;开为 1&#xff0c;并展示启用&#xff1b;关为 0&#xff0c;并展示禁用&#xff09;。 <div class"tableScopeSwitch…...

编程日记 2025/2/15 16:41:33

Redis常用的五种数据结构详解

一、Redis 数据库介绍 Redis 是一种键值&#xff08;Key-Value&#xff09;数据库。相对于关系型数据库&#xff08;比如 MySQL&#xff09;&#xff0c;Redis 也被叫作非关系型数据库。 像 MySQL 这样的关系型数据库&#xff0c;表的结构比较复杂&#xff0c;会包含很多字段&…...

编程日记 2025/2/15 16:40:32

stm32 CubeMx 实现SD卡/sd nand FATFS读写测试

文章目录 stm32 CubeMx 实现SD卡/SD nand FATFS读写测试 1. 前言 2. 环境介绍 2.1 软硬件说明 2.2 外设原理图 3. 工程搭建 3.1 CubeMx 配置 3.2 SDIO时钟配置说明 3.2 读写测试 3.2.1 添加读写测试代码 3.3 FATFS文件操作 3.3.1 修改读写测试代码 3.4 配置问题记…...

编程日记 2025/2/15 16:39:26

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2026/2/8 3:54:15

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2026/2/7 17:35:15

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2026/1/25 16:39:17

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2026/1/28 1:40:03

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2026/1/26 2:22:24

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2026/1/31 4:26:17

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2026/2/2 0:52:30

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

编程新知 2025/11/26 7:13:37