冰墩墩情绪量表

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何创建一个冰墩墩情绪量表,这是一种有趣且互动性强的方式,用于表达你对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” 并手动刷新,你将看到页面。

初始效果

初始化冰墩墩情绪量表

在这一步中,你将学习如何初始化冰墩墩情绪量表并设置初始情绪状态。

  1. 打开 js/index.js 文件。
  2. 找到以下代码:
const range = document.getElementById("range");
const BingDwenDwen = document.querySelector(".BingDwenDwen");
  1. 添加以下代码,将冰墩墩的初始情绪状态设置为“不满意”:
BingDwenDwen.className = "BingDwenDwen not-satisfied";

这会将冰墩墩元素的初始类名设置为 not-satisfied,它对应于“不满意”的情绪状态。

根据进度条更新冰墩墩的情绪

在这一步中,你将学习如何根据进度条的位置更新冰墩墩的情绪。

  1. js/index.js 文件中找到以下代码:
range.onchange = (e) => {
  let value = Number(e.target.value); // 值
  // TODO
};
  1. 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";
}

这段代码会检查进度条的值,并相应地更新冰墩墩元素的类名。这些类名与挑战描述中指定的不同情绪状态相对应。

  1. 保存文件并刷新浏览器,以查看更新后的代码效果。

现在,当你拖动进度条时,冰墩墩的图像应该会改变,以反映相应的情绪状态。完成后的效果如下:

完成后的效果
✨ 查看解决方案并练习

总结

恭喜你!你已经完成了这个项目。你可以在LabEx中练习更多实验来提升你的技能。