javascript在五个文本框分别输入五个数输出最大值和最小值

原创

mob649e8154f2e5 2024-03-09 04:32:04 ©著作权

文章标签 文本框 HTML 数据 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8154f2e5的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript中的文本框输入与输出

在网页开发中，经常会遇到需要用户输入数据并处理的情况。其中，利用文本框进行数据输入是常见的方式之一。本文将以JavaScript为例，展示如何在五个文本框中分别输入五个数，然后输出这些数中的最大值和最小值。

文本框输入与输出

在HTML中，可以通过<input>标签创建文本框，用户可以在文本框中输入数据。通过JavaScript，我们可以获取文本框中的值，并进行处理。

下面是一个简单的HTML代码片段，包含五个文本框用于输入数据：

<input type="text" id="num1">
<input type="text" id="num2">
<input type="text" id="num3">
<input type="text" id="num4">
<input type="text" id="num5">
<button onclick="findMinMax()">Find MinMax</button>
<p id="result"></p>

在JavaScript中，我们可以通过document.getElementById()方法获取文本框中的值，并进行比较计算。下面是一个示例的JavaScript代码：

function findMinMax() {
    let num1 = parseFloat(document.getElementById("num1").value);
    let num2 = parseFloat(document.getElementById("num2").value);
    let num3 = parseFloat(document.getElementById("num3").value);
    let num4 = parseFloat(document.getElementById("num4").value);
    let num5 = parseFloat(document.getElementById("num5").value);

    let max = Math.max(num1, num2, num3, num4, num5);
    let min = Math.min(num1, num2, num3, num4, num5);

    document.getElementById("result").innerHTML = "Max: " + max + "<br> Min: " + min;
}

在上面的代码中，我们首先获取了五个文本框中的值，然后使用Math.max()和Math.min()方法找到这五个数中的最大值和最小值，并将结果输出到页面上。

序列图

接下来，我们使用序列图来展示整个过程的交互流程。下面是使用mermaid语法表示的序列图：

sequenceDiagram
    participant User
    participant HTML
    participant JavaScript

    User ->> HTML: 输入五个数
    HTML ->> JavaScript: 调用findMinMax()
    JavaScript -->> HTML: 返回最大值和最小值
    HTML -->> User: 显示结果

通过上面的序列图，我们可以清晰地看到用户输入数据后，HTML页面调用JavaScript函数处理数据并返回结果的整个流程。