【Html.js——生成欢迎语】关于你的欢迎语（蓝桥杯真题-1764）【合集】

Rossy Yan

发布于 2025-01-24 11:21:32

6600

代码可运行

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

运行总次数：0

代码可运行

介绍

营销号，有时候需要一些特定的欢迎语，但针对特定的用户，我们希望可以个性化一点。本题需要在项目文件中修改代码存在的问题，实现根据模版生成特定用户的欢迎语。

准备

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

├── css
│   ├── bootstrap.min.css
│   └── style.css
├── js
│   ├── bootstrap.bundle.min.js
│   └── index.js
└── index.html

其中：

css/style.css 是页面样式文件。
css/bootstrap.min.css 和 js/bootstrap.bundle.min.js 是 Bootstrap 相关文件。
js/index.js 是页面功能实现的逻辑代码。
index.html 是页面布局。

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。打开环境右侧的【Web 服务】，就可以在浏览器中看到如下错误显示，当前显示没有正确获取到输入的用户、课程、平台的输入框内容。

目标

请修复 index.js 文件中存在的 bug，修复完成后，在表单的对应输入框中输入以下内容：

页面效果如下所示：

规定

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

通关代码✔️

//index.js
function generate() {
    subject = document.getElementById("subject").value;
    event1 = document.getElementById("event1").value;
    event2 = document.getElementById("event2").value;
    if (subject ==="" || event1 ==="" || event2 ===""){
        return;
    }
    let result = `欢迎用户${subject}在${event2}学习${event1}课程！`;
    document.getElementById("result").value = result;
}

代码解析📑

1. HTML 部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script src="./js/index.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <script src="./js/bootstrap.bundle.min.js"></script>
  </head>

  <body onload="onload()">
    <div class="container">
      <h1>营销号生成器</h1>
      <div class="row">
        <div class="col-5">
          <form action="javascript:void(0);" autocomplete="off">
            <div class="form-group">
              <lable for="subject">用户：</lable>
              <input
                type="text"
                id="subject"
                class="form-control"
                placeholder="小蓝"
                required
              />
            </div>
            <div class="form-group">
              <lable for="event1">课程：</lable>
              <input
                type="text"
                id="event1"
                class="form-control"
                placeholder="Python"
                required
              />
            </div>
            <div class="form-group">
              <lable for="event2">平台：</lable>
              <input
                type="text"
                id="event2"
                class="form-control"
                placeholder="蓝桥云课"
                required
              />
            </div>
            <div class="form-group">
              <input
                type="submit"
                value="生成"
                class="btn btn-primary"
                onclick="generate()"
              />
            </div>
          </form>
        </div>
        <div class="col-7" style="margin-top: 35px">
          <textarea
            id="result"
            rows="8"
            placeholder="欢迎用户小蓝在蓝桥云课学习Python课程！"
          ></textarea>
        </div>
      </div>
    </div>
  </body>
</html>

解释：

<!DOCTYPE html> 声明该文档是一个 HTML5 文档。
<html lang="en"> 表示该 HTML 文档使用的语言是英语。
<head> 部分包含了文档的元数据和资源引用：
- <meta charset="UTF-8"> 设定字符编码为 UTF-8，确保页面能正确显示各种字符。
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> 使页面在不同设备上具有良好的响应式布局，初始缩放比例为 1。
- <title>Document</title> 定义页面的标题。
- <link rel="stylesheet" href="./css/style.css"> 引入自定义的 CSS 文件，用于自定义页面样式。
- <script src="./js/index.js"></script> 引入自定义的 JavaScript 文件，用于实现页面逻辑。
- <link rel="stylesheet" href="./css/bootstrap.min.css"> 引入 Bootstrap 的 CSS 文件，方便使用 Bootstrap 的样式类。
- <script src="./js/bootstrap.bundle.min.js"></script> 引入 Bootstrap 的 JavaScript 捆绑文件，包含了 Bootstrap 的各种组件和交互功能。
<body onload="onload()">：在页面加载完成时调用 onload 函数（不过在提供的代码中未看到 onload 函数的具体实现）。
<div class="container"> 是一个 Bootstrap 提供的容器类，用于将内容包裹在一个固定宽度的容器中。
<h1>营销号生成器</h1> 显示页面的主标题。
<div class="row"> 是 Bootstrap 的行类，用于创建行。
<div class="col-5"> 和 <div class="col-7"> 是 Bootstrap 的列类，将页面分为两列，宽度分别为 5/12 和 7/12。
<form action="javascript:void(0);" autocomplete="off">：
- action="javascript:void(0);" 防止表单提交时刷新页面，因为使用 JavaScript 函数来处理表单提交。
- autocomplete="off" 关闭输入框的自动完成功能。
<div class="form-group"> 是 Bootstrap 的表单组类，用于将表单元素分组。
<lable for="subject">用户：</lable> 为输入框提供一个标签，for 属性与输入框的 id 关联。
<input type="text" id="subject" class="form-control" placeholder="小蓝" required />：
- type="text" 表示输入框为文本输入框。
- id="subject" 为输入框设置唯一标识符，方便 JavaScript 操作。
- class="form-control" 使用 Bootstrap 的表单控件样式。
- placeholder="小蓝" 显示输入框的占位符。
- required 使该输入框为必填项。
其他输入框类似，用于输入课程和平台信息。
<input type="submit" value="生成" class="btn btn-primary" onclick="generate()" />：
- type="submit" 表示这是一个提交按钮。
- class="btn btn-primary" 使用 Bootstrap 的按钮样式，使其具有主要按钮的外观。
- onclick="generate()" 点击按钮时调用 generate 函数。
<textarea id="result" rows="8" placeholder="欢迎用户小蓝在蓝桥云课学习 Python 课程！"></textarea>：
- id="result" 为文本区域设置唯一标识符，用于显示生成的欢迎语。
- rows="8" 设置文本区域的行数。
- placeholder 显示初始占位符。

2. CSS部分

textarea {
    resize: none;
    overflow: hidden;
    width: 100%;
    min-height: 50px;
}
#footer {
    text-align: center;
}
.form-group {
    margin-top: 10px;
}

解释：

textarea 选择器：
- resize: none; 禁止用户调整文本区域的大小。
- overflow: hidden; 隐藏文本区域的溢出内容。
- width: 100%; 使文本区域的宽度占满父元素。
- min-height: 50px; 设置文本区域的最小高度。
#footer 选择器：
- text-align: center; 将元素内的文本居中对齐（虽然在 HTML 中未看到元素使用 id="footer"）。
.form-group 选择器：
- margin-top: 10px; 为表单组元素设置顶部外边距，使其在垂直方向上有一定的间隔。

3. JavaScript 部分

function generate() {
    subject = document.getElementById("subject").value;
    event1 = document.getElementById("event1").value;
    event2 = document.getElementById("event2").value;
    if (subject ==="" || event1 ==="" || event2 ===""){
        return;
    }
    let result = `欢迎用户${subject}在${event2}学习${event1}课程！`;
    document.getElementById("result").value = result;
}

解释：

function generate() {...} 定义了一个名为 generate 的函数，用于生成欢迎语。
subject = document.getElementById("subject").value; 等：
- 通过 document.getElementById("subject").value 获取 id 为 subject 的输入框的值，存储在 subject 变量中。
- 同样地，获取 event1 和 event2 输入框的值。
if (subject ==="" || event1 ==="" || event2 ===""){...}：
- 此条件检查输入框是否为空，如果任何一个输入框为空，则函数将直接返回，不执行后续操作。
let result =`欢迎用户在{event2} 学习 ${event1} 课程！`;：
- 使用模板字符串生成欢迎语，将变量 subject、event1 和 event2 的值插入到字符串中。
document.getElementById("result").value = result;：
- 将生成的欢迎语设置为 id 为 result 的文本区域的 value，使其显示在页面上。

4. 工作流程 ▶️

页面加载：
- 页面加载时，会引入所需的 CSS 和 JavaScript 文件，包括 Bootstrap 的资源和自定义资源。
- 显示页面的布局，包括输入框和文本区域。
用户输入：
- 用户在输入框中输入用户名称、课程名称和平台名称。
生成欢迎语：
- 点击 "生成" 按钮时，调用 generate 函数。
- 在 generate 函数中，首先获取三个输入框的值。
- 检查输入框是否都不为空，如果有空值，函数将不执行后续操作。
- 若输入完整，使用模板字符串根据输入的内容生成欢迎语。
- 将生成的欢迎语存储在 result 变量中，并将其设置到 id 为 result 的文本区域，使其显示在页面上。