HTML和js实现计算器
时间: 2024-06-09 09:12:18 浏览: 9
以下是一个简单的HTML和JavaScript实现的计算器:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" id="result" disabled><br>
<button onclick="calculate('+')">+</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('*')">*</button>
<button onclick="calculate('/')">/</button><br>
<button onclick="number(1)">1</button>
<button onclick="number(2)">2</button>
<button onclick="number(3)">3</button><br>
<button onclick="number(4)">4</button>
<button onclick="number(5)">5</button>
<button onclick="number(6)">6</button><br>
<button onclick="number(7)">7</button>
<button onclick="number(8)">8</button>
<button onclick="number(9)">9</button><br>
<button onclick="number(0)">0</button>
<button onclick="clear()">AC</button>
<button onclick="calculate('=')">=</button>
<script>
var firstNum = '';
var secondNum = '';
var operator = '';
var result = document.getElementById('result');
function number(num) {
if (operator === '') {
firstNum += num;
result.value = firstNum;
} else {
secondNum += num;
result.value = secondNum;
}
}
function calculate(op) {
if (op === '=') {
if (operator === '+') {
result.value = parseFloat(firstNum) + parseFloat(secondNum);
} else if (operator === '-') {
result.value = parseFloat(firstNum) - parseFloat(secondNum);
} else if (operator === '*') {
result.value = parseFloat(firstNum) * parseFloat(secondNum);
} else if (operator === '/') {
result.value = parseFloat(firstNum) / parseFloat(secondNum);
}
firstNum = result.value;
secondNum = '';
operator = '';
} else {
operator = op;
}
}
function clear() {
firstNum = '';
secondNum = '';
operator = '';
result.value = '';
}
</script>
</body>
</html>
```
解释一下实现的方法:
1. 用一个文本框来显示计算结果,设置为禁用状态。
2. 按钮分为数字和运算符,数字按钮点击后将数字添加到第一个数字或第二个数字中,运算符按钮点击时记录运算符。
3. 当点击等号按钮时进行计算,根据运算符进行相应的计算,并将结果存储在第一个数字中,清空第二个数字和运算符。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)