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 配置问题记…...
日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...
《Playwright：微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
-----深度优先搜索（DFS）实现)
c++ 面试题(1)-----深度优先搜索（DFS）实现
操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述 地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
Python Ovito统计金刚石结构数量
大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...