Register
> 博客>

js制作计算器代码

新星源码网 3月 31日 2 0

以下是一个简单的JavaScript计算器代码示例。这个计算器可以执行基本的加、减、乘、除运算。它使用了HTML来创建界面，并使用JavaScript来处理输入和计算。

HTML部分:

html复制代码
<!DOCTYPE html>  
<html>  
<body>  
  
<h2>简单计算器</h2>  
  
<input id="num1" type="number" placeholder="输入第一个数字">  
<input id="num2" type="number" placeholder="输入第二个数字">  
  
<button onclick="add()">加</button>  
<button onclick="subtract()">减</button>  
<button onclick="multiply()">乘</button>  
<button onclick="divide()">除</button>  
  
<p id="result"></p>  
  
<script src="calculator.js"></script>  
  
</body>  
</html>

JavaScript部分 (保存为calculator.js):

javascript复制代码
function getNumbers() {  
    return {  
        num1: parseFloat(document.getElementById('num1').value),  
        num2: parseFloat(document.getElementById('num2').value)  
    };  
}  
  
function add() {  
    let numbers = getNumbers();  
    document.getElementById('result').innerHTML = `结果是: ${numbers.num1 + numbers.num2}`;  
}  
  
function subtract() {  
    let numbers = getNumbers();  
    document.getElementById('result').innerHTML = `结果是: ${numbers.num1 - numbers.num2}`;  
}  
  
function multiply() {  
    let numbers = getNumbers();  
    document.getElementById('result').innerHTML = `结果是: ${numbers.num1 * numbers.num2}`;  
}  
  
function divide() {  
    let numbers = getNumbers();  
    if (numbers.num2 === 0) {  
        document.getElementById('result').innerHTML = '错误: 除数不能为0';  
    } else {  
        document.getElementById('result').innerHTML = `结果是: ${numbers.num1 / numbers.num2}`;  
    }  
}

这个计算器非常基础，只支持两个数字的运算。如果你想要一个更复杂的计算器，比如支持多个数字、多个运算符，或者支持括号等，那么你需要实现一个更复杂的解析和计算逻辑。这通常涉及到编写一个解析器来解析用户输入的表达式，并将其转换为一个可以计算的内部表示形式。这通常是一个相对复杂的任务，需要深入理解编程和算法。

如果您想要一个更高级的计算器，支持多步运算和更复杂的表达式，那么您可以考虑使用现有的库，比如 math.js，或者自己实现一个表达式解析器。以下是一个简单的例子，展示了如何使用JavaScript实现一个基本的表达式解析器。

HTML部分 (和之前一样，除了去掉了按钮的onclick属性):

html复制代码
<!DOCTYPE html>  
<html>  
<body>  
  
<h2>简单表达式计算器</h2>  
  
<input id="expression" type="text" placeholder="输入表达式">  
<button onclick="calculate()">计算</button>  
  
<p id="result"></p>  
  
<script src="calculator.js"></script>  
  
</body>  
</html>

JavaScript部分 (保存为calculator.js):

javascript复制代码
function calculate() {  
    let expression = document.getElementById('expression').value;  
    try {  
        let result = eval(expression); // 使用eval函数来解析和计算表达式  
        document.getElementById('result').innerHTML = `结果是: ${result}`;  
    } catch (error) {  
        document.getElementById('result').innerHTML = '错误: 无法计算表达式';  
    }  
}

上面的代码使用了eval函数来解析和计算表达式。虽然eval在某些情况下可以工作，但它通常被认为是不安全的，因为它会执行任何传递给它的JavaScript代码。在实际应用中，您应该避免使用eval，并考虑使用更安全、更可控的方法来实现表达式解析和计算。

一个更安全的方法是使用现有的数学表达式解析库，如math.js。以下是一个使用math.js的示例：

首先，您需要在项目中引入math.js库。您可以通过下载库文件并在HTML中引用它，或者使用CDN链接。

HTML部分 (添加了math.js的CDN链接):

html复制代码
<!DOCTYPE html>  
<html>  
<body>  
  
<h2>使用math.js的表达式计算器</h2>  
  
<input id="expression" type="text" placeholder="输入表达式">  
<button onclick="calculate()">计算</button>  
  
<p id="result"></p>  
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.5/math.min.js"></script>  
<script src="calculator.js"></script>  
  
</body>  
</html>

JavaScript部分 (使用math.js来解析和计算表达式):

javascript复制代码
function calculate() {  
    let expression = document.getElementById('expression').value;  
    try {  
        let result = math.evaluate(expression); // 使用math.js的evaluate函数来解析和计算表达式  
        document.getElementById('result').innerHTML = `结果是: ${result}`;  
    } catch (error) {  
        document.getElementById('result').innerHTML = '错误: 无法计算表达式';  
    }  
}

在这个例子中，我们使用了math.js库中的evaluate函数来安全地解析和计算数学表达式。这样，我们就避免了使用eval函数可能带来的安全风险。

math.js提供了许多其他功能和选项，您可以根据需要进行配置和使用。有关更多信息，请参阅math.js的官方文档。

Related

热门文章

微海报