【AI赋能】太酷啦!用 Trae 写代码,5 分钟拥有专属班级养宠物网页小程序

你是资深前端工程师，帮我开发一个【班级电子宠物积分管理系统】，完全按照以下规则实现：一、系统定位- 面向小学班级，老师/学生使用，纯前端，数据存在 LocalStorage。- 技术栈：HTML + CSS + JavaScript + Bootstrap（可选，让界面好看）。二、核心功能1. 宠物领养：   - 基础宠物：布偶猫、柯基犬、小仓鼠、小鹦鹉、小兔子。   - 进阶宠物：小狐狸、小鹿、独角兽、小青龙、火烈鸟（80分解锁）。   - 每人限1只，记录宠物名称、类型、等级、积分。2. 积分规则（可在界面操作加减）：   加分：   - 作业优秀/工整：+1   - 课堂主动回答：+1   - 帮助同学：+2   - 值日认真：+1/天   - 进步5分+：+3；进步10分+：+5   - 拾金不昧：+5   扣分：   - 未交作业：-1   - 上课讲话：-1   - 座位脏乱：-1   - 争执：-33. 宠物升级：   - 幼崽→成长：20分   - 成长→成年：50分   - 成年→进阶：100分 + 每周之星   - 80分可解锁进阶宠物。4. 积分兑换：   - 30分：免写卡   - 50分：值日班长1天   - 80分：小文具   - 100分：小达人奖状三、界面要求- 左侧：学生/宠物列表（姓名、宠物、积分、等级）。- 中间：积分操作面板（加分/扣分按钮、输入学生姓名）。- 右侧：兑换/升级面板。- 风格简洁、卡通、适合小学生。四、输出要求- 完整代码：index.html、style.css、script.js。- 代码规范、注释清晰、可直接在浏览器打开运行。- 包含示例数据，方便测试。

在之前的【班级电子宠物积分系统】代码基础上，添加宠物图片显示功能，要求如下：1. 图片素材：   - 图片放在项目的 images 文件夹里，文件名对应宠物类型：     cat.png、dog.png、hamster.png、parrot.png、rabbit.png、fox.png、deer.png、unicorn.png、dragon.png、flamingo.png   - 用相对路径引用：<imgsrc="images/xxx.png"alt="宠物名">2. 界面修改：   - 在学生/宠物列表里，每个学生项前面显示对应的宠物图片（100×100px）   - 领养宠物时，下拉选择框里也要显示宠物小图标   - 宠物升级时，图片可以保持不变（或后期再做升级图）3. 代码修改：   - 在 script.js 里，给每个宠物类型绑定对应的图片路径   - 渲染学生列表时，动态插入 <img> 标签显示宠物图   - 样式上让图片居中、圆角、加一点阴影，更可爱4. 输出：   - 给出修改后的完整 index.html、style.css、script.js 代码   - 代码带注释，说明图片路径和渲染逻辑   - 确保打开 index.html 就能看到宠物图片

基于现有【班级电子宠物积分管理系统+升级换图】代码，新增「宠物从蛋孵化」核心功能，要求如下：1.  孵化阶段素材规范：    - 存放路径：项目images文件夹下，新增「蛋」的图片，命名为：egg.png（通用初始蛋），尺寸100×100px，透明背景PNG格式    - 原有宠物成长阶段图片命名不变，孵化成功后自动切换到对应宠物的幼崽期图片2.  孵化逻辑规则：    - 学生领养宠物时，**初始状态为一颗蛋（egg.png）**，而非直接获得幼崽宠物    - 孵化条件：累计积分达到 10 分，自动孵化；孵化成功后弹出提示：「恭喜！你的宠物蛋孵化成功啦！」    - 孵化后规则：蛋→随机/自选对应宠物的幼崽期（cat_baby.png等），后续按原有积分规则升级    - 未孵化前：蛋的图片显示在列表中，鼠标 hover 时显示提示：「加油攒积分，快让宠物破壳吧！」3.  界面与交互优化：    - 领养面板：将「选择宠物」改为「领养宠物蛋」，按钮文字改为「领养我的宠物蛋」    - 孵化动画：蛋孵化时添加**蛋壳破裂的简单动画**（如图片旋转+透明度变化+缩放），持续2秒    - 新增「孵化进度条」：在蛋的图片下方显示，0→10分对应进度0%→100%，积分增加时进度条同步更新    - 宠物成长预览模块：新增「蛋」的缩略图，放在幼崽期图片前面，展示完整成长链：蛋→幼崽→成长→成年→进阶4.  代码修改要求：    - 在script.js中新增宠物状态字段：`petStatus: 'egg' | 'hatched'`，存储在LocalStorage中    - 新增积分判断逻辑：积分≥10时，自动将`petStatus`改为`hatched`，并切换图片为幼崽期    - 进度条动态渲染：根据当前积分/10计算进度百分比    - 保留原有升级换图、积分加减功能，确保逻辑不冲突    - 给出修改后的完整index.html、style.css、script.js代码，带详细注释5.  兼容要求：    - 已领养宠物的学生，可手动重置为蛋（老师后台功能，可选）    - 未孵化的蛋，不影响积分加减，仅进度条更新

基于现有【班级电子宠物积分管理系统（含孵化+升级换图）】代码，新增**老师专属后台功能**，要求如下：1.  后台入口设计    - 在系统首页添加一个「老师后台」按钮，点击后弹出密码验证框（默认密码：123456，可在代码中修改）    - 验证通过后显示后台操作面板，未验证则隐藏所有后台功能    - 后台面板独立于学生界面，放在页面右侧，可折叠2.  核心后台功能    功能1：**学生积分批量/单个修改**    - 支持按学生姓名搜索，输入新积分值，点击「修改积分」立即生效    - 支持「批量加分」（如全班+2分，奖励集体表现）、「批量清零」（学期末重置）    - 修改后自动同步宠物状态：积分达标则触发孵化/升级，图片和进度条实时更新    功能2：**宠物状态重置/干预**    - 支持将任意学生的宠物状态重置为「蛋」（重新孵化）    - 支持手动触发孵化（即使积分不足10分，给落后学生鼓励）    - 支持直接升级宠物（如奖励「每周之星」学生，直接升到成年期）    功能3：**学生数据管理**    - 新增「添加学生」按钮：输入姓名，选择初始宠物类型，一键添加到系统    - 新增「删除学生」按钮：删除指定学生的所有数据（谨慎操作）    - 新增「导出数据」按钮：将所有学生的姓名、积分、宠物状态导出为CSV文件，方便存档    功能4：**系统参数配置**    - 支持修改孵化积分门槛（默认10分，可改为5分/15分）    - 支持修改各阶段升级积分（幼崽→成长默认20分，可自定义）    - 支持修改老师后台密码3.  界面与交互要求    - 后台按钮和面板用**醒目的蓝色**区分，和学生界面风格统一但有辨识度    - 所有操作添加二次确认弹窗（如「确定要重置该学生的宠物状态吗？」），防止误操作    - 导出CSV成功后弹出提示：「数据导出成功！」    - 后台操作不影响学生端的正常使用4.  代码修改要求    - 在script.js中新增`isTeacher`状态变量，存储登录状态；新增`teacherPassword`常量（可修改）    - 新增积分修改、状态重置、数据导出的函数，注释清晰    - 导出CSV功能使用Blob对象实现，纯前端完成，无需后端    - 确保LocalStorage数据同步，修改后刷新页面数据不丢失    - 给出修改后的完整index.html、style.css、script.js代码，兼容原有所有功能5.  安全与兼容要求    - 密码验证错误时，弹出提示「密码错误，请重试」，不泄露其他信息    - 后台功能仅老师可见，学生端完全隐藏

基于现有【班级电子宠物积分管理系统（含孵化+升级换图+老师后台）】代码，优化界面排版布局，核心要求：**学生宠物列表横向排列+操作模块折叠按钮化**，具体要求如下：1.  核心排版修改：学生宠物列表横向展示    - 布局方式：将原纵向列表改为**横向滚动容器**，一行固定显示6个学生宠物卡片，超出部分横向滚动（手机端自适应为3个/行）    - 卡片样式：每个学生卡片为正方形（宽高150px），包含：宠物图片（居中，80×80px）、学生姓名、当前积分、宠物阶段（蛋/幼崽/成长等），卡片加圆角+阴影， hover 时轻微上浮    - 容器样式：列表容器高度自适应，添加「左右箭头」按钮，点击可切换显示卡片，支持鼠标滚轮横向滚动    - 适配要求：保证在教室一体机、电脑、平板上都能正常显示，不挤压变形2.  操作模块优化：改为折叠式小按钮    - 整合所有操作功能（积分加减、领养宠物蛋、成长预览、老师后台），统一放在页面**右上角**，以「图标按钮」形式展示    - 按钮设计：每个功能对应一个简洁图标（如：+号=积分加减、蛋=领养、预览图=成长预览、钥匙=老师后台），按钮尺寸40×40px，圆形，悬浮显示功能名称    - 折叠逻辑：      - 默认只显示图标按钮，点击按钮后弹出对应的操作面板（面板贴紧按钮下方，点击空白处自动收起）      - 「积分加减」面板：包含学生姓名搜索框、加分/扣分选项、确认按钮      - 「领养宠物蛋」面板：包含领养按钮、孵化规则提示      - 「成长预览」面板：包含宠物完整成长链缩略图      - 「老师后台」面板：点击后先弹出密码框，验证通过后显示后台功能    - 样式要求：按钮和面板配色和主界面统一，面板加半透明背景，避免遮挡学生列表3.  保留所有原有功能    - 宠物孵化、升级换图、积分规则、老师后台（积分修改/状态重置/数据导出）等功能完全保留    - 孵化进度条、升级动画、提示弹窗等交互效果不变    - LocalStorage 数据存储逻辑不变，确保修改排版后数据不丢失4.  代码修改要求    - 在 style.css 中新增横向列表样式（display: flex; overflow-x: auto; 等），添加卡片 hover 动画、滚动容器样式    - 在 script.js 中调整操作面板的显示/隐藏逻辑，新增点击空白处收起面板的事件    - 优化 DOM 结构，将原纵向列表的 div 改为横向列表容器，调整元素层级    - 给出修改后的完整 index.html、style.css、script.js 代码，带注释说明排版修改部分    - 测试兼容性，确保横向滚动和折叠面板在不同设备上正常工作5.  额外优化建议（可选实现）    - 学生卡片按积分从高到低排序，积分相同按姓名排序    - 面板弹出时添加淡入动画，提升交互体验

基于现有【班级电子宠物积分管理系统】代码，**新增「随机抽学生回答问题」功能**，其他所有功能（快捷加减分、积分匹配宠物形态、每日消耗、宠物更换规则等）完全保留，不许改动。## 一、 功能位置在**教师后台页面**，新增一个「随机抽学生」按钮，样式与后台其他按钮统一（比如蓝色、圆角、14px字体）。## 二、 核心功能逻辑1.  **抽取规则**    - 点击按钮后，从全班学生列表中**随机抽取1名学生**。    - 支持**重复抽取**（同一学生可多次被抽到）。    - 若班级无学生数据，弹窗提示「暂无学生信息，请先导入学生」。2.  **抽取效果（醒目，适合课堂展示）**    - 抽取时添加**3秒滚动动画**：快速切换显示不同学生姓名，模拟抽奖转盘效果。    - 动画结束后，**放大显示中奖学生姓名**（比如字体放大到20px、红色加粗），并弹窗提示「恭喜 XXX 被选中回答问题！」。    - 抽取结果在后台页面**保留显示**，直到下一次抽取。3.  **积分联动（可选，可开关）**    - 抽取后，可手动给被选中学生**加1分鼓励分**（弹窗询问「是否给 XXX 加1分鼓励分？」，点击确定则积分+1，宠物形态同步更新；点击取消则不加）。    - 加分后同步LocalStorage，主页面学生卡片实时刷新。## 三、 界面与样式要求1.  「随机抽学生」按钮放在教师后台功能区，与其他按钮并排或单独一行，布局整齐。2.  抽取结果显示区域：位于按钮下方，显示格式为「当前抽到：【XXX】」，醒目易看。3.  动画效果流畅，无卡顿；弹窗提示清晰，不遮挡其他功能。## 四、 代码修改要求1.  新增HTML结构：按钮+结果显示区。2.  新增CSS样式：按钮样式、中奖姓名放大样式、滚动动画样式。3.  新增JavaScript函数：    - `randomPickStudent()`：实现随机抽取+滚动动画功能。    - `pickScoreAdd()`：实现抽取后加分功能。4.  所有新增代码添加注释，标注 `// 新增抽学生功能：XXX`。5.  确保新增功能不影响现有任何逻辑，测试时：    - 抽取学生正常 → 加分正常 → 宠物形态同步 → 每日消耗正常。