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考核第三题
题三：随机点名 要求： 分为上下两个部分，上方为显示区域，下方为控制区域。显示区域显示五十位群成员的学号和姓名，控制区域由开始和结束两个按钮 组成。点击开始按钮，显示区域里的内容开始滚动，…...
LabVIEW袜品压力测试系统
开发了一种基于LabVIEW开发的袜品压力测试系统。该系统利用LabVIEW并结合灵敏的传感器和高精度的处理模块，实现了对袜品压力的精确测量和分析。系统不同于传统的服装压力测试方法，为研究和评价袜子的舒适性提供了新的测试手段。 项目背景 该系统的…...
jsp页面跳转失败
今天解决一下jsp页面跳转失败的问题 在JavaWeb的学习过程中，编写了这样一段代码： <html> <body> <h2>Hello World!</h2><%--这里提交的路径，需要寻找到项目的路径--%> <%--${pageContext.request.context…...
1.推荐算法基本概念
推荐算法是一个非常重要且广泛应用的领域，特别是在电子商务、社交媒体、内容推荐等领域。第一课我们将介绍推荐算法的基本概念和分类，并简单讲解两种常见的推荐算法：协同过滤和基于内容的推荐。 推荐算法的基本概念 推荐系统的目标是根据用…...
Java 大视界 -- 大数据伦理与法律：Java 技术在合规中的作用与挑战（87）
💖亲爱的朋友们，热烈欢迎来到 青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...
【ISO 14229-1:2023 UDS诊断全量测试用例清单系列：第十五节】
ISO 14229-1:2023 UDS诊断服务测试用例全解析（RoutineControl_0x31服务） 作者：车端域控测试工程师 更新日期：2025年02月14日 关键词：UDS协议、0x31服务、例程控制、ISO 14229-1:2023、ECU测试 一、服务功能概述 0x31服…...
【深度强化学习】策略梯度算法：REINFORCE
策略梯度 强化学习算法进阶 Q-learning、DQN 及 DQN 改进算法都是基于价值（value-based）的方法，其中 Q-learning 是处理有限状态的算法，而 DQN 可以用来解决连续状态的问题。在强化学习中，除了基于值函数的方法&#…...
手机用流量怎样设置代理ip?
互联网各领域资料分享专区(不定期更新)： Sheet...
CI/CD部署打包方法
项目目前部署方式： 各地区服务器打包同一个runner（需要互相排队，不并发）各地区客户端可以并发打包，同个地区客户端打多个包需要排队 部署方法 下载gitlab-runner： https://docs.gitlab.com/runner/insta…...
LabVIEW 中dde.llbDDE 通信功能
在 LabVIEW 功能体系中，位于 C:\Program Files (x86)\National Instruments\LabVIEW 2019\vi.lib\Platform\dde.llb 的 dde.llb 库占据着重要的地位。作为一个与动态数据交换（DDE）紧密相关的库文件，它为 LabVIEW 用户提供了与其他…...
探索后端开发中的异步API：基于Resilience4j与Reactive Programming的高性能设计
引言 随着微服务架构的普及，后端系统面临的挑战愈发严峻，尤其是在高并发和高可用性方面。传统的同步调用模式虽然简单，但在处理大量并发请求时可能会成为瓶颈。为了应对这一问题，异步编程逐渐成为后端开发的热门话题。 在本文中…...
leetcode 2915. 和为目标值的最长子序列的长度
题目如下 数据范围 本题就是典型的背包问题target就是容量，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 -…...
【Vue】打包vue3+vite项目发布到github page的完整过程
文章目录 第一步：打包第二步：github仓库设置第三步：安装插件gh-pages第四步：两个配置第五步：上传github其他问题1. 路由2.待补充 参考文章： 环境： vue3vite windows11（使用终端即可&…...
Flutter编译问题记录
问题： 运行出现以下报错 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 …...
poetry shell - 作为插件安装和使用
安装插件 安装完 poetry，想进入环境，执行 poetry shell 后会报错，是因为 poetry shell 在后面的版本中，是作为插件，需要额外安装。 poetry self add poetry-plugin-shell关于 poetry-plugin-shell github : https:/…...
UE5中的快捷键汇总
以下是Unreal Engine 5（UE5）中一些常用的快捷键大全，涵盖编辑器操作、视口导航、蓝图编辑等多个方面(会持续补充作为笔记存在)： 通用快捷键 快捷键功能Ctrl S保存当前关卡Ctrl Shift S保存所有Ctrl Z撤销Ctrl C复制Ctrl V…...
2月14（信息差）
🌍杭州：全球数贸港核心区建设方案拟出台 争取国家支持杭州在网络游戏管理给予更多权限 🎄Kimi深夜炸场：满血版多模态o1级推理模型！OpenAI外全球首次！Jim Fan：同天两款国产o1绝对不是巧合&#x…...
ElementUI 的组件 Switch（开关）如何让文字显示在按钮上
效果图： 一、引入switch组件 给组件自定义一个类：tableScopeSwitch，设置开关的值和对应展示的文字（开为 1，并展示启用；关为 0，并展示禁用）。 <div class"tableScopeSwitch…...
Redis常用的五种数据结构详解
一、Redis 数据库介绍 Redis 是一种键值（Key-Value）数据库。相对于关系型数据库（比如 MySQL），Redis 也被叫作非关系型数据库。 像 MySQL 这样的关系型数据库，表的结构比较复杂，会包含很多字段&…...
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 配置问题记…...
CANN / cann-learning-hub: Ascend C 算子工程化开发指南
【免费下载链接】cann-learning-hub CANN 学习中心仓，支持在线互动运行、边学边练，提供教程、示例与优化方案，一站式助力昇腾开发者快速上手。 项目地址: https://gitcode.com/cann/cann-learning-hub name: ascendc-ops-project desc…...
：音频传输与SBC编码机制深度解析（a2dp_sbc_send_frames）。)
SRv6-BE配置实战：从基础到验证，【Bluedroid】A2dp Source播放流程源码分析(10)：音频传输与SBC编码机制深度解析（a2dp_sbc_send_frames）。
SRv6-BE 配置案例详解 SRv6（Segment Routing over IPv6）是一种基于IPv6的源路由技术，通过将路径信息编码在数据包头中实现灵活流量调度。SRv6-BE（Best Effort）是最基础的转发模式，以下为典型配置案例及技术…...
从‘真假美猴王’到CycleGAN：我是如何用AI把自家猫变成梵高画的
从‘真假美猴王’到CycleGAN：我是如何用AI把自家猫变成梵高画的 去年冬天，我家橘猫"南瓜"在窗台上晒太阳时，阳光透过它蓬松的毛发在墙面上投下斑驳光影，那一瞬间我突然想到：如果能把这画面变成梵高风格的油画…...
企业级应用如何利用Taotoken实现大模型服务的容灾与路由
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 企业级应用如何利用Taotoken实现大模型服务的容灾与路由 在将大模型服务集成到企业关键业务流程时，服务的持续可用性和…...
复盘红日Vulnstack1：除了MSF和CS，我们还能用哪些“冷门”工具链完成内网横向？
红日Vulnstack1靶场实战：突破常规工具链的内网横向技术探索 当主流渗透工具遭遇严格监控时，如何构建替代性攻击链？红日安全团队的Vulnstack1靶场作为国内知名的内网渗透训练环境，常被用作测试Metasploit（MSF࿰…...
终极指南：5步掌握REFramework，打造专属RE引擎游戏Mod
终极指南：5步掌握REFramework，打造专属RE引擎游戏Mod 【免费下载链接】REFramework Mod loader, scripting platform, and VR support for all RE Engine games 项目地址: https://gitcode.com/GitHub_Trending/re/REFramework 想要为《生化危机》…...
CANN/cannbot-skills NPU推理优化
【免费下载链接】cannbot-skills CANNBot 是面向 CANN 开发的用于提升开发效率的系列智能体，本仓库为其提供可复用的 Skills 模块。 项目地址: https://gitcode.com/cann/cannbot-skills name: infer-model-optimize-team description: NPU 模型推理优化助手…...
2026 毕业季必藏：9 款 AI 论文查重降重工具全测评，Paperxie 领衔高效通关
paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/期刊论文https://www.paperxie.cn/weight?type1https://www.paperxie.cn/weight?type1 毕业季论文查重与 AIGC 检测双重压力下，选对工具能少走 90% 弯路。2026 年知网、维普 AIGC 检测算法全面…...
Python量化投资终极指南：免费快速获取同花顺问财数据的完整解决方案
Python量化投资终极指南：免费快速获取同花顺问财数据的完整解决方案 【免费下载链接】pywencai 获取同花顺问财数据 项目地址: https://gitcode.com/gh_mirrors/py/pywencai 在量化投资的世界里，数据获取往往是最耗时耗力的环节。想象一下&#x…...
在卡西欧计算器上集成ChatGPT：串口通信与AI边缘应用实践
1. 项目概述：当计算器遇上AI，一场硬核的跨界实验最近在折腾一个特别有意思的项目，一个叫“ChatGPT-mod-for-casio-calculators”的开源项目。简单来说，它的目标是把ChatGPT这样的现代AI对话能力，“塞进”卡西欧&#x…...