简介 在这个项目中,你将学习如何创建一个冰墩墩情绪量表,这是一种有趣且互动性强的方式,用于表达你对2022年奥运会的满意度。冰墩墩吉祥物已在全球引起轰动,这个项目让你能够与它互动并对你的总体满意度进行评分。 👀 预览 🎯 任务 在这个项目中,你将学习: 如何将冰墩墩情绪量表初始化为初始情绪状态为“不满意” 如何根据进度条的位置更新冰墩墩的情绪,以反映不同程度的满意度 🏆 成果 完成这个项目后,你将能够: 操作文档对象模型(DOM),根据用户输入更改HTML元素的外观 使用JavaScript事件处理程序来响应用户交互 将CSS类应用于元素以更改其视觉外观 Skills Graph %%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/variables -.-> lab-299855{{"冰墩墩情绪量表"}} javascript/cond_stmts -.-> lab-299855{{"冰墩墩情绪量表"}} javascript/dom_select -.-> lab-299855{{"冰墩墩情绪量表"}} javascript/dom_manip -.-> lab-299855{{"冰墩墩情绪量表"}} javascript/event_handle -.-> lab-299855{{"冰墩墩情绪量表"}} javascript/dom_traverse -.-> lab-299855{{"冰墩墩情绪量表"}} end
设置项目结构 在这一步中,你将设置项目结构并准备必要的文件和文件夹。 在你的代码编辑器中打开项目文件夹。目录结构如下: ├── css │ └── index.css ├── index.html └── js └── index.js 其中: index.html 是主页。 css 是用于存储页面样式的文件夹。 js/index.js 是你需要添加代码的JavaScript文件。 点击WebIDE右下角的 Go Live 按钮来运行项目。 接下来,在虚拟机顶部打开 “Web 8080” 并手动刷新,你将看到页面。
初始化冰墩墩情绪量表 在这一步中,你将学习如何初始化冰墩墩情绪量表并设置初始情绪状态。 打开 js/index.js 文件。 找到以下代码: const range = document.getElementById("range"); const BingDwenDwen = document.querySelector(".BingDwenDwen"); 添加以下代码,将冰墩墩的初始情绪状态设置为“不满意”: BingDwenDwen.className = "BingDwenDwen not-satisfied"; 这会将冰墩墩元素的初始类名设置为 not-satisfied,它对应于“不满意”的情绪状态。
根据进度条更新冰墩墩的情绪 在这一步中,你将学习如何根据进度条的位置更新冰墩墩的情绪。 在 js/index.js 文件中找到以下代码: range.onchange = (e) => { let value = Number(e.target.value); // 值 // TODO }; 在 onchange 事件处理程序中添加以下代码,以根据进度条的值更新冰墩墩的情绪: if (value == 25) { BingDwenDwen.className = "BingDwenDwen a-little-unsatisfied"; } else if (value == 50) { BingDwenDwen.className = "BingDwenDwen ordinary"; } else if (value == 75) { BingDwenDwen.className = "BingDwenDwen satisfied"; } else if (value == 100) { BingDwenDwen.className = "BingDwenDwen great"; } else { BingDwenDwen.className = "BingDwenDwen not-satisfied"; } 这段代码会检查进度条的值,并相应地更新冰墩墩元素的类名。这些类名与挑战描述中指定的不同情绪状态相对应。 保存文件并刷新浏览器,以查看更新后的代码效果。 现在,当你拖动进度条时,冰墩墩的图像应该会改变,以反映相应的情绪状态。完成后的效果如下: