JavaScript写一个计算器
时间: 2023-11-19 11:06:07 浏览: 36
好的,以下是一个简单的JavaScript计算器示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
</head>
<body>
<form name="calculator">
<input type="text" name="result" id="result" value="" />
<br />
<input type="button" value="1" onclick="calculator.result.value+='1'" />
<input type="button" value="2" onclick="calculator.result.value+='2'" />
<input type="button" value="3" onclick="calculator.result.value+='3'" />
<input type="button" value="+" onclick="calculator.result.value+='+'" />
<br />
<input type="button" value="4" onclick="calculator.result.value+='4'" />
<input type="button" value="5" onclick="calculator.result.value+='5'" />
<input type="button" value="6" onclick="calculator.result.value+='6'" />
<input type="button" value="-" onclick="calculator.result.value+='-'" />
<br />
<input type="button" value="7" onclick="calculator.result.value+='7'" />
<input type="button" value="8" onclick="calculator.result.value+='8'" />
<input type="button" value="9" onclick="calculator.result.value+='9'" />
<input type="button" value="*" onclick="calculator.result.value+='*'" />
<br />
<input type="button" value="c" onclick="calculator.result.value=''" />
<input type="button" value="0" onclick="calculator.result.value+='0'" />
<input type="button" value="=" onclick="calculator.result.value=eval(calculator.result.value)" />
<input type="button" value="/" onclick="calculator.result.value+='/'" />
</form>
</body>
</html>
```
JS代码:
```javascript
// 禁用Enter键提交表单
document.onkeydown = function(event) {
if (event.keyCode == 13) {
return false;
}
}
// 将数字和符号添加到计算器屏幕上
function addInput(input) {
document.calculator.result.value += input;
}
// 清空计算器屏幕
function clearInput() {
document.calculator.result.value = "";
}
// 计算结果
function calculateResult() {
try {
var result = eval(document.calculator.result.value);
document.calculator.result.value = result;
} catch (error) {
alert("输入有误,请重新输入!");
}
}
```
在HTML代码中,我们创建了一个表单,其中包含一个文本框用于显示计算结果,以及一些按钮用于添加数字和运算符。每个按钮都有一个 `onclick` 属性,当用户单击按钮时,将调用相应的 JavaScript 函数。
在JS代码中,我们定义了三个函数:`addInput()` 用于将数字和符号添加到计算器屏幕上,`clearInput()` 用于清空计算器屏幕,`calculateResult()` 用于计算结果并将其显示在计算器屏幕上。在 `calculateResult()` 函数中,我们使用 `try...catch` 语句来捕获用户可能输入的错误表达式,如果发生错误,我们将显示一个警告框提示用户重新输入。
这只是一个简单的计算器示例,如果你想进一步完善它,可以添加更多的功能和操作。