请写一个javascript语言的计算器代码
时间: 2024-06-12 09:05:23 浏览: 12
以下是一个简单的JavaScript计算器代码:
```javascript
// 获取页面元素
var display = document.getElementById("display");
var buttons = document.getElementsByClassName("button");
// 定义变量
var num1 = "";
var num2 = "";
var operator = "";
var result = "";
// 循环添加事件监听器
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
var value = this.getAttribute("data-value");
switch (value) {
case "ac":
clear();
break;
case "ce":
backspace();
break;
case "+":
case "-":
case "*":
case "/":
operatorFunc(value);
break;
case "=":
calculate();
break;
default:
inputNumber(value);
}
updateDisplay();
});
}
// 输入数字
function inputNumber(num) {
if (operator === "") {
num1 += num;
} else {
num2 += num;
}
}
// 运算符
function operatorFunc(op) {
if (num1 !== "") {
operator = op;
}
}
// 计算结果
function calculate() {
if (num1 !== "" && num2 !== "") {
switch (operator) {
case "+":
result = parseFloat(num1) + parseFloat(num2);
break;
case "-":
result = parseFloat(num1) - parseFloat(num2);
break;
case "*":
result = parseFloat(num1) * parseFloat(num2);
break;
case "/":
result = parseFloat(num1) / parseFloat(num2);
break;
}
clear();
num1 = result.toFixed(2).toString();
operator = "";
}
}
// 删除最后一个数字
function backspace() {
if (operator === "") {
num1 = num1.slice(0, -1);
} else {
num2 = num2.slice(0, -1);
}
}
// 清空计算器
function clear() {
num1 = "";
num2 = "";
operator = "";
result = "";
}
// 更新显示
function updateDisplay() {
display.value = num1 + operator + num2;
}
```
HTML代码:
```html
<div id="calculator">
<input id="display" type="text" readonly>
<div class="row">
<button class="button" data-value="ac">AC</button>
<button class="button" data-value="ce">CE</button>
<button class="button" data-value="/">/</button>
<button class="button" data-value="*">*</button>
</div>
<div class="row">
<button class="button" data-value="7">7</button>
<button class="button" data-value="8">8</button>
<button class="button" data-value="9">9</button>
<button class="button" data-value="-">-</button>
</div>
<div class="row">
<button class="button" data-value="4">4</button>
<button class="button" data-value="5">5</button>
<button class="button" data-value="6">6</button>
<button class="button" data-value="+">+</button>
</div>
<div class="row">
<button class="button" data-value="1">1</button>
<button class="button" data-value="2">2</button>
<button class="button" data-value="3">3</button>
<button class="button" data-value="=">=</button>
</div>
<div class="row">
<button class="button" data-value="0">0</button>
<button class="button" data-value=".">.</button>
</div>
</div>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)