【Html.js——范围判定】偷梁换柱（蓝桥杯真题-2332）【合集】

Rossy Yan

发布于 2025-02-02 21:18:49

3200

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

随着医疗水平的进步，人的平均寿命在慢慢提升。现在全球平均预期寿命是 73.2 岁，而在 1950 年则只有 47 岁。那么人类的寿命有极限吗？根据最新的研究，人类寿命或超过 120 岁，达到 150 岁。因此，有关年龄的应用普遍将当今人类的合理年龄范围设置在 0 - 150 岁之间。那么，当一个年龄被录入，我们又是如何判断其是否合理的呢？

准备步骤

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

├── age.js
└── index.html

其中：

index.html 是主页面。
age.js 是需要补充代码的 js 文件。

目标效果

在文件 age.js 中，有一个 person 对象，当它的 age 属性值改变时需要对新值做判断，将其永远控制在 0 - 150 之间。具体需求如下：

如果新属性值在 0 -150 之间（包含 0 和 150），则直接更新。
如果新属性值小于 0，则属性值更新为 0。
如果新属性值大于 150，则属性值更新为 150。

提示：可以使用 Object.defineProperty 或者 Proxy 对 person 对象进行处理。完成后，最终页面效果如下：

要求规定

题目使用 JavaScript 完成，不得使用第三方库。
只能在 age.js 中指定区域答题，不能修改 index.html 中的任何代码。
请不要修改环境自动生成的 age.js 以及 index.html 文件的文件路径以及文件名。
检测时使用的输入数据与题目中给出的示例数据可能是不同的。考生的程序必须是通用的，不能只对需求中给定的数据有效。
满足题目需求后，点击「提交检测」系统会自动判分。

判分标准

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

通关代码✔️

// 请不要更改这个对象里面的内容
let person = {
    age: 0,
};

// 使用 Proxy 对 person 对象进行处理
person = new Proxy(person, {
    set(target, property, value) {
        if (property === 'age') {
            if (value >= 0 && value <= 150) {
                target[property] = value;
            } else if (value < 0) {
                target[property] = 0;
            } else {
                target[property] = 150;
            }
            return true;
        }
        // 如果不是 age 属性，正常设置
        target[property] = value;
        return true;
    }
});

module.exports = person; // 检测需要，请勿删除

代码解析📑

一、Html 部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>合理设置人的年龄</title>
    <style>
      body {
        padding: 100px;
      }
      .input-container{
        margin-bottom: 15px;
      }
      .input-container,.output-container{
        width: 500px;
        margin:0 auto;
      }
      .text{
        width: 30%;
        text-align: right;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <span class="text">请输出具体的年龄：</span>
      <input type="number" id="input">
    </div>
    <div class="output-container">  
      <span class="text">实际输出：</span>
      <span id="output"></span>
    </div>
    <script>
      module = {};
    </script>
    <script type="text/javascript" src="./age.js"></script>
    <script>
      const p = module.exports;
      const input = document.getElementById("input");
      const output = document.getElementById("output");
      
      input.addEventListener("input", (e) => {
        p.age = e.target.value;
        output.innerText = p.age;
      });
    </script>
  </body>
</html>

<head> 部分：
- 设置字符编码为 UTF - 8，确保支持各种字符。
- 设置浏览器兼容性和视口。
- 定义网页标题为 “合理设置人的年龄”。
- 定义了一些 CSS 样式，用于美化页面布局，包括设置页面内边距、输入和输出容器的宽度和边距，以及文本的对齐方式等。
<body> 部分：
- 创建一个包含提示文本和输入框的 div 元素，用于用户输入年龄。输入框的 id 为 input，类型为 number。
- 创建一个包含提示文本和显示结果的 span 元素的 div 元素，用于显示处理后的年龄。显示结果的 span 元素的 id 为 output。
- 创建一个空的 module 对象，用于模拟 Node.js 中的模块导出机制。
- 引入 age.js 文件，该文件包含对年龄进行验证和处理的逻辑。
- 获取 age.js 文件中导出的 person 对象，并将其赋值给变量 p。
- 获取输入框和显示结果的元素。
- 为输入框添加 input 事件监听器，当用户输入内容时，将输入的值赋给 p.age，并将处理后的 p.age 值显示在 output 元素中。

二、JavaScript 部分

// 请不要更改这个对象里面的内容
let person = {
  age: 0,
};

// 使用 Proxy 对 person 对象进行处理
person = new Proxy(person, {
  set(target, property, value) {
      if (property === 'age') {
          if (value >= 0 && value <= 150) {
              target[property] = value;
          } else if (value < 0) {
              target[property] = 0;
          } else {
              target[property] = 150;
          }
          return true;
      }
      // 如果不是 age 属性，正常设置
      target[property] = value;
      return true;
  }
});

module.exports = person; // 检测需要，请勿删除

定义 person 对象：
- 定义一个初始 age 属性为 0 的 person 对象。
使用 Proxy 拦截属性设置：
- 使用 Proxy 对 person 对象进行代理，拦截其属性设置操作。
- set 方法是 Proxy 的一个陷阱（trap），用于拦截对象属性的赋值操作。它接收三个参数：target 表示目标对象（即 person），property 表示要设置的属性名，value 表示要设置的属性值。
- 当 property 为 age 时，进行年龄范围判断：
  - 如果 value 在 0 到 150 之间（包含 0 和 150），则直接将 target[property] 设置为 value。
  - 如果 value 小于 0，则将 target[property] 设置为 0。
  - 如果 value 大于 150，则将 target[property] 设置为 150。
- 如果 property 不是 age，则正常设置属性值。
- set 方法需要返回一个布尔值，表示属性是否设置成功，这里始终返回 true。
导出 person 对象：
- 使用 module.exports 导出 person 对象，以便在 HTML 文件中使用。

三、工作流程 ▶️

页面加载：
- 浏览器加载 HTML 文件，解析其中的 HTML、CSS 和 JavaScript 代码。
- 创建 module 对象，引入 age.js 文件，获取 age.js 中导出的 person 对象。
- 获取输入框和显示结果的元素，并为输入框添加 input 事件监听器。
用户输入年龄：
- 用户在输入框中输入年龄。
- 触发输入框的 input 事件，事件处理函数被调用。
年龄验证和处理：
- 在事件处理函数中，将输入的值赋给 p.age。
- 由于 p 是 person 对象的代理，赋值操作会触发 Proxy 的 set 方法。
- set 方法对输入的年龄进行判断，根据年龄范围将 person.age 设置为合理的值。
显示处理后的年龄：
- 将处理后的 p.age 值显示在 output 元素中。