HTML 计算结果

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

<output> 标签是 HTML5 中新引入的容器元素。它通常用于在网站/应用程序中显示任何计算的结果。

在这个逐步实验中,你将学习如何使用 HTML 的 <output> 标签创建一个结果占位符。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/MultimediaandGraphicsGroup -.-> html/embed_media("`Embedding External Media`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_access("`Accessibility in Forms`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70812{{"`HTML 计算结果`"}} html/text_head -.-> lab-70812{{"`HTML 计算结果`"}} html/embed_media -.-> lab-70812{{"`HTML 计算结果`"}} html/forms -.-> lab-70812{{"`HTML 计算结果`"}} html/form_access -.-> lab-70812{{"`HTML 计算结果`"}} html/inter_elems -.-> lab-70812{{"`HTML 计算结果`"}} end

添加 HTML Output 标签

在你的电脑上创建一个名为 index.html 的 HTML 文件。

在你的 HTML 文件的 body 部分中添加 <output> 标签。

<body>
  <h1>结果占位符</h1>
  <output></output>
</body>

添加输入元素

创建输入元素,例如文本框或按钮,这些元素可用于在输出元素中生成结果。定义 for 属性,描述输出元素与输入元素之间的关系。

<body>
  <h1>结果占位符</h1>
  <input type="text" id="number1" />
  <input type="text" id="number2" />

  <button onclick="calculateResult()">计算</button>

  <output for="number1 number2"></output>
</body>

编写 JavaScript 函数

编写一个 JavaScript 函数,根据用户输入生成结果。

<script>
  function calculateResult() {
    // 获取用户输入的值
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    // 存储操作的结果
    var result = parseInt(num1) + parseInt(num2);

    // 在输出元素中显示结果
    document.querySelector("output").value = result;
  }
</script>

编写完 HTML 和 JavaScript 后,在浏览器中打开 HTML 文件并测试你的结果占位符。

在输入框中输入两个数字,然后点击“计算”按钮。这些数字的和应显示在输出元素中。

总结

恭喜你,你已经成功地使用 HTML 的 <output> 标签创建了一个结果占位符。在这个实验中,你学习了如何添加输入元素并编写 JavaScript 函数,以根据用户输入生成结果。你可以使用输出元素在你的网站上显示计算结果或任何其他结果。

您可能感兴趣的其他 HTML 教程