培训制作网站源码,互联网app推广,溧水建设局网站,wordpress my visitors 数据备份恢复题三#xff1a;随机点名
要求#xff1a; 分为上下两个部分#xff0c;上方为显示区域#xff0c;下方为控制区域。显示区域显示五十位群成员的学号和姓名#xff0c;控制区域由开始和结束两个按钮 组成。点击开始按钮#xff0c;显示区域里的内容开始滚动#xff0c;…
题三随机点名
要求 分为上下两个部分上方为显示区域下方为控制区域。显示区域显示五十位群成员的学号和姓名控制区域由开始和结束两个按钮 组成。点击开始按钮显示区域里的内容开始滚动点击结束按钮内容滚动停止随机显示一位成员的学号和姓名。
html 部分
bodydiv classdisplayul classlist/ul/divdiv classanliubutton classstart开始/buttonbutton classstop结束/button/div
css部分
stylebody {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部分
scriptdocument.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第三题
