怎么用javascript实现四则运算-前端问答-PHP中文网

怎么用javascript实现四则运算

PHPz

发布： 2023-04-06 09:05:24

原创

2876人浏览过

在web开发中，javascript是一个非常流行的编程语言，使用javascript可以实现很多有趣的功能，比如使用javascript实现简单的四则运算。通过本篇文章，我们将介绍如何使用javascript实现四则运算。

一、HTML结构

首先，我们需要创建一个HTML文件，并在文件中添加一个用于输入表达式的文本框、四种运算符的按钮和一个用于显示结果的区域。HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用JavaScript实现四则运算</title>
</head>
<body>
    <input type="text" id="expression">
    <button onclick="calculate('+')">+</button>
    <button onclick="calculate('-')">-</button>
    <button onclick="calculate('*')">*</button>
    <button onclick="calculate('/')">/</button>
    <p id="result"></p>
    <script src="四则运算.js"></script>
</body>
</html>

登录后复制

在这个HTML结构中，我们使用input元素作为输入表达式的文本框，使用button元素作为四种运算符的按钮，并在这些按钮上添加了calculate函数的调用。此外，我们还添加了一个用于显示结果的区域，其中，p元素的id属性为result，我们将使用这个id来获取显示结果的区域。

二、JavaScript代码

立即学习“Java免费学习笔记（深入）”；

接下来，我们需要编写一个JavaScript文件，用于实现四则运算。JavaScript代码如下：

function calculate(operator) {
    var expression = document.getElementById("expression").value; //获取表达式
    var operArr = expression.split(operator); //分割表达式
    var numArr = []; //存储数字
    for(var i = 0; i < operArr.length; i++) {
        numArr.push(parseFloat(operArr[i])); //将分割后的字符串转换为浮点数
    }
    switch(operator) {
        case '+':
            var result = numArr[0] + numArr[1];
            break;
        case '-':
            var result = numArr[0] - numArr[1];
            break;
        case '*':
            var result = numArr[0] * numArr[1];
            break;
        case '/':
            var result = numArr[0] / numArr[1];
            break;
    }
    document.getElementById("result").innerHTML = result; //将结果显示在页面上
}

登录后复制

在这段JavaScript代码中，我们定义了一个calculate函数，用于对输入的表达式进行四则运算。函数中，我们先通过document.getElementById("expression").value获取用户输入的表达式，然后通过split方法将表达式分割为两个数字，并且将这两个数字存储在一个数组中。接着，通过switch语句对四种运算符进行不同的处理，最后将结果通过document.getElementById("result").innerHTML显示在页面上。