学霸养成计划：趣味背诵抽查游戏 - 知达AI助教 | 教育人工智能案例

6938edfe9d56...xlsx
xls
加载失败
帮我做一个学霸养成计划的网页。顶部标题为“学霸养成计划每天进步一点点”，加点有趣的表情符号，页面风格美观，类似迪士尼风格。下面还有一行标题，为“背诵检查“。要求形状是球体，球体上面是根据导入文档中的随机的学号，排列要有间隔，球不要重叠覆盖，独立开来，直接点击球可以展示出学号所对应的姓名。在球体下方有一个按钮和显示框，按钮里面滚动的是导入文档中的随机学号，也可以点击按钮，暂停滚动，显示框内显示出对应学号的同学姓名，可以调节滚动速度。
以下是一个符合您需求的 “学霸养成计划”网页 HTML 实现，完全基于您提供的 30 名学生名单（学号 1–30），采用 迪士尼风格（圆润、柔和、高饱和度配色、手写感字体、轻盈动效），顶部标题含趣味符号，下方为「背诵检查」模块：

✅ 球体（<div class="ball">）独立悬浮、不重叠、带间隔与阴影

✅ 点击任意球体 → 弹出对应学号的姓名（模态框）

✅ 底部滚动按钮：自动随机切换学号（可暂停/启动），速度可调（滑块控制）

✅ 显示框实时同步当前学号及姓名

✅ 全部使用纯 HTML/CSS/JS，无外部依赖，开箱即用

✅ 完整可运行 HTML 代码（复制保存为 .html 文件即可在浏览器中打开）：

代码生成中...

知达任务回放中

学霸养成计划：趣味背诵抽查游戏

代码

预览

82
83
84
85
86
87
88
89
90
    .ball:nth-child(1) { background: 
        linear-gradient(145deg, 
        #a1c4fd, #c2e9fb); animation
        -delay: 0.2s; }
    .ball:nth-child(2) { background: 
        linear-gradient(145deg, 
        #f6d365, #fda085); animation
        -delay: 0.4s; }
    .ball:nth-child(3) { background: 
        linear-gradient(145deg, 
        #84fab0, #8fd3f4); animation
        -delay: 0.6s; }
    .ball:nth-child(4) { background: 
        linear-gradient(145deg, 
        #d4fc79, #96e6a1); animation
        -delay: 0.8s; }
    .ball:nth-child(5) { background: 
        linear-gradient(145deg, 
        #a6c1ee, #f6d365); animation
        -delay: 1.0s; }
    .ball:nth-child(6) { background: 
        linear-gradient(145deg, 
        #ff9a9e, #fad0c4); animation
        -delay: 1.2s; }
    .ball:nth-child(7) { background: 
        linear-gradient(145deg, 
        #a18cd1, #fbc2eb); animation
        -delay: 1.4s; }
    .ball:nth-child(8) { background: 
        linear-gradient(145deg, 
        #8ec5fc,
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

✅ 完整可运行 HTML 代码（复制保存为 .html 文件即可在浏览器中打开）：

✅ 完整可运行 HTML 代码（复制保存为 `.html` 文件即可在浏览器中打开）：