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

目录

背景介绍

准备步骤

目标效果

要求规定

判分标准

通关代码✔️

代码解析

一、Html 部分

二、JavaScript 部分

三、工作流程 ▶️

测试结果

---

背景介绍

随着医疗水平的进步，人的平均寿命在慢慢提升。现在全球平均预期寿命是 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 部分

  
    
    
    
    
    
  
  
    

      请输出具体的年龄：
      
    
    
  
      实际输出：
      
    
    
    
    
  

1.  部分：
   • 设置字符编码为 UTF - 8，确保支持各种字符。
   • 设置浏览器兼容性和视口。
   • 定义网页标题为 “合理设置人的年龄”。
   • 定义了一些 CSS 样式，用于美化页面布局，包括设置页面内边距、输入和输出容器的宽度和边距，以及文本的对齐方式等。
2.  部分：
   • 创建一个包含提示文本和输入框的 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; // 检测需要，请勿删除

1. 定义 person 对象：
   • 定义一个初始 age 属性为 0 的 person 对象。
2. 使用 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。
3. 导出 person 对象：
   • 使用 module.exports 导出 person 对象，以便在 HTML 文件中使用。

三、工作流程 ▶️

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

 

通过以上步骤，实现了对用户输入的年龄进行验证和处理，并将处理后的结果显示在页面上的功能。

---

测试结果