每日一题：冰墩墩心情刻度尺

介绍

2022 奥运会满意度调查开始了，冰墩墩作为奥运吉祥物以亲民可爱的形象火遍全球，这次，冰墩墩请你打分，满分 5 分，最低 1 分，快来评分吧！

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
4
5
├── css
│   └── index.css
├── index.html
└── js
    └── index.js

其中：

  • index.html 是主页面。
  • css 是存放页面样式的文件夹。
  • js/index.js 是需要补充代码的 js 文件。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
wget https://labfile.oss.aliyuncs.com/courses/16474/dundun.zip && unzip dundun.zip && rm dundun.zip

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

初始效果

在初始化的时候拖拽红色心情条，冰墩墩脸上并没有效果

目标

请在 js/index.js 文件中补全代码，具体需求如下：

不同心情下的冰墩墩对应类名如下表：

心情: 类名
不满意 .not-satisfied
有点不满意 .a-little-unsatisfied
普通 .ordinary
满意 .satisfied
棒 .great
  1. 在初始状态下，冰墩冰墩元素 （class=BingDunDun） 处于不满意状态。
  2. 进度条在不同位置时，通过给冰墩冰墩元素 （class=BingDunDun） 添加对应类名完成不同心情的效果切切换。
  3. 不能修改原有类名和添加多余类名，例：满意状态下的对应该是 class=BingDunDun satisfied。

完成后效果如下：

完成效果

规定

  • 请按照给出的步骤操作，切勿修改默认提供的文件名称、文件夹路径等。
  • 满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 473 | 总提交次数: 504 | 通过率: 93.8%

难度: 简单 标签: 2023, 省模拟赛, Web 前端, JavaScript

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const range = document.getElementById("range"); // 获取进度条 
const BingDunDun = document.querySelector(".BingDunDun");  //获取冰墩墩元素
BingDunDun.classList.add('not-satisfied')
// TODO: 待补充代码

range.onchange = (e) => {
  let value = Number(e.target.value); // value 进度条的值
  // TODO: 待补充代码
  console.log(value);
  if (value === 100) {
    BingDunDun.classList.remove('great', 'satisfied', 'ordinary', 'a-little-unsatisfied', 'not-satisfied')
    BingDunDun.classList.add('great')
  }
  if (value === 75) {
    BingDunDun.classList.remove('great', 'satisfied', 'ordinary', 'a-little-unsatisfied', 'not-satisfied')
    BingDunDun.classList.add('satisfied')
  }
  if (value === 50) {
    BingDunDun.classList.remove('great', 'satisfied', 'ordinary', 'a-little-unsatisfied', 'not-satisfied')
    BingDunDun.classList.add('ordinary')
  }
  if (value === 25) {
    BingDunDun.classList.remove('great', 'satisfied', 'ordinary', 'a-little-unsatisfied', 'not-satisfied')
    BingDunDun.classList.add('a-little-unsatisfied')
  }
  if (value === 0) {
    BingDunDun.classList.remove('great', 'satisfied', 'ordinary', 'a-little-unsatisfied', 'not-satisfied')
    BingDunDun.classList.add('not-satisfied')
  }
};