那个网站可以做ppt赚钱,长乐福州网站建设,网站制作公司中企动力推荐,学校网站建设总结报告分为上下两个部分#xff0c;上方为显示区域#xff0c;下方为控制区域。显示区域显示五十位群成员的学号和姓名#xff0c;控制区域由开始和结束两个按钮 组成。点击开始按钮#xff0c;显示区域里的内容开始滚动#xff0c;点击结束按钮#xff0c;内容滚动停止#x…分为上下两个部分上方为显示区域下方为控制区域。显示区域显示五十位群成员的学号和姓名控制区域由开始和结束两个按钮 组成。点击开始按钮显示区域里的内容开始滚动点击结束按钮内容滚动停止随机显示一位成员的学号和姓名。解1.设置数组那个展示区好像是可以不用写的qwq2.存储定时器用于后续清除3.存储随机的学生索引4.获取元素5.绑定开始键的点击事件1清除定时器2启动定时器3剩余一个学生的时候禁用button5.绑定结束键的点击事件1同上12移除当前选中的学生当数组中有学生时!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.box1 {display: flex;}table {/* border: 1px black solid; */border-spacing: 0;}td,th {border: 1px black solid;width: 150px;text-align: center;}h2 {text-align: center;}.box2 {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.screen {width: 450px;height: 35px;color: black;text-align: center;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}/style/headbodyh2成员名单/h2div classbox1tabletheadtrth学号/thth姓名/th/tr/theadtbody classb1/tbody/tabletabletheadtrth学号/thth姓名/th/tr/theadtbody classb2/tbody/tabletabletheadtrth学号/thth姓名/th/tr/theadtbody classb3/tbody/tabletabletheadtrth学号/thth姓名/th/tr/theadtbody classb4/tbody/tabletabletheadtrth学号/thth姓名/th/tr/theadtbody classb5/tbody/table/divh2随机点名/h2div classbox2div classscreen学号 姓名/div/divdiv classbtnsbutton classstart开始/buttonbutton classend结束/button/divscript// 设置数组const arr [{num:1,name: 灰太狼},{num:2,name: 红太狼},{num:3,name: 焦太狼},{num:4,name: 懒洋洋},{num:5,name: 喜羊羊},{num:6,name: 沸羊羊},{num:7,name: 美羊羊},{num:8,name: 小灰灰},{num:9,name: 暖羊羊},{num:10,name: 村长},{num:11,name: 灰太狼},{num:12,name: 红太狼},{num:13,name: 焦太狼},{num:14,name: 懒洋洋},{num:15,name: 喜羊羊},{num:16,name: 沸羊羊},{num:17,name: 美羊羊},{num:18,name: 小灰灰},{num:19,name: 暖羊羊},{num:20,name: 村长},{num:21,name: 灰太狼},{num:22,name: 红太狼},{num:23,name: 焦太狼},{num:24,name: 懒洋洋},{num:25,name: 喜羊羊},{num:26,name: 沸羊羊},{num:27,name: 美羊羊},{num:28,name: 小灰灰},{num:29,name: 暖羊羊},{num:30,name: 村长},{num:31,name: 灰太狼},{num:32,name: 红太狼},{num:33,name: 焦太狼},{num:34,name: 懒洋洋},{num:35,name: 喜羊羊},{num:36,name: 沸羊羊},{num:37,name: 美羊羊},{num:38,name: 小灰灰},{num:39,name: 暖羊羊},{num:40,name: 村长},{num:41,name: 灰太狼},{num:42,name: 红太狼},{num:43,name: 焦太狼},{num:44,name: 懒洋洋},{num:45,name: 喜羊羊},{num:46,name: 沸羊羊},{num:47,name: 美羊羊},{num:48,name: 小灰灰},{num:49,name: 暖羊羊},{num:50,name: 村长},]// 展示区// 获取函数const tbody1 document.querySelector(.b1)const tbody2 document.querySelector(.b2)const tbody3 document.querySelector(.b3)const tbody4 document.querySelector(.b4)const tbody5 document.querySelector(.b5)// 循环遍历学生信息for (let i 0; i arr.length; i) {// 创建一行trconst tr document.createElement(tr)// 给tr填充“学号姓名”的单元格tr.innerHTML td${arr[i].num}/tdtd${arr[i].name}/td// 用i分组把tr插入不同的tbodyif (i 10) {tbody1.appendChild(tr)}else if (i 20) {tbody2.appendChild(tr)}else if (i 30) {tbody3.appendChild(tr)}else if (i 40) {tbody4.appendChild(tr)}else if (i 50) {tbody5.appendChild(tr)}}// 显示区let timeId 0 // 存储定时器ID用于后续清除let random 0 // 存储随机选中的学生索引// 获取元素const screen document.querySelector(.screen)const start document.querySelector(.start)// 绑定开始键的点击事件start.addEventListener(click, function () {clearInterval(timeId) // 先清除之前的定时器防止重复启动// 启动定时器timeId setInterval(function () {// 随机选中random parseInt(Math.random() * arr.length)// 在screen显示选中的学生信息screen.innerHTML 学号${arr[random].num}姓名${arr[random].name}},100)// 剩余一个学生时禁用开始键和结束键if (arr.length 1) {start.disabled end.disabled true}})// 获取元素const end document.querySelector(.end)// 绑定结束键的点击事件end.addEventListener(click, function () {clearInterval(timeId) // 先清除之前的定时器防止重复启动// 如果数组有学生移除当前选中的学生if (arr.length 0) {arr.splice(random, 1) // 删除一个元素}})/script/body/html第一遍复写1.显示选中的学生信息${}大括号里的写错了380381行screen.innerHTML 学号${arr[random].num}姓名${arr[random].name}2.定时器书写不熟悉376行timeId setInterval(function () {// 随机选中random parseInt(Math.random() * arr.length)// 在screen显示选中的学生信息screen.innerHTML 学号${arr[random].num}姓名${arr[random].name}},100)