js制作简单计算器功能
时间: 2024-09-29 13:14:02 浏览: 16
在JavaScript中,你可以通过创建一个简单的HTML界面,配合一些基本的DOM操作和事件处理函数,实现一个基础的计算器功能。以下是一个简化的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
#calculator {
width: 200px;
border: 1px solid gray;
}
input[type=number] {
width: 40px;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled>
<br>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="setOperator('+')">+</button>
<!-- 添加更多的按钮如减、乘、除等 -->
</div>
<script>
let num = '';
function appendNumber(num) {
num += num;
document.getElementById('display').value = num;
}
function setOperator(operator) {
if (num !== '' && operator !== '=') { // 操作符存在则计算
calculate();
}
num += operator;
}
function calculate() {
try {
let result = eval(num);
num = result.toString(); // 转换结果为字符串以便显示
document.getElementById('display').value = num;
} catch (error) {
num = '错误';
}
}
// 清空输入
document.getElementById('clear').addEventListener('click', () => {
num = '';
document.getElementById('display').value = '';
});
</script>
</body>
</html>
```
在这个示例中,我们有数字按钮用于添加数字,运算符按钮用于设置加减乘除等操作,并有一个清除按钮来清空输入。`calculate`函数会尝试使用`eval`函数对当前的输入进行数学计算。注意`eval`不是一个安全的实践,因为它可以执行任何JavaScript代码,这里仅作为演示目的。
阅读全文