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 配置问题记…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞！！！ 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）
前言： 最近在做行为检测相关的模型，用的是时空图卷积网络（STGCN），但原有kinetic-400数据集数据质量较低，需要进行细粒度的标注，同时粗略搜了下已有开源工具基本都集中于图像分割这块，…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用： 方法一：使用 Homebrew 安装 Git（推荐） 步骤如下：打开终端（Terminal.app） 1.安装 Homebrew…...
BLEU评分：机器翻译质量评估的黄金标准
BLEU评分：机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域，衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标，自2002年由IBM的Kishore Papineni等人提出以来，…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC？ WebRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音…...