创建一个交互式冰墩墩情绪量表

介绍

在这个项目中，你将学习如何创建一个冰墩墩情绪量表，这是一种有趣且互动性强的方式，用于表达你对 2022 年奥运会的满意度。冰墩墩吉祥物已在全球引起轰动，这个项目让你能够与它互动并对你的总体满意度进行评分。

👀 预览

冰墩墩情绪量表演示

🎯 任务

在这个项目中，你将学习：

如何将冰墩墩情绪量表初始化为初始情绪状态为“不满意”
如何根据进度条的位置更新冰墩墩的情绪，以反映不同程度的满意度

🏆 成果

完成这个项目后，你将能够：

操作文档对象模型（DOM），根据用户输入更改 HTML 元素的外观
使用 JavaScript 事件处理程序来响应用户交互
将 CSS 类应用于元素以更改其视觉外观

设置项目结构

在这一步中，你将设置项目结构并准备必要的文件和文件夹。

在你的代码编辑器中打开项目文件夹。目录结构如下：

├── 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";
}

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

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

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

完成后的效果

总结

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