用html和js编写成具有排布的1,2,3,4,5,6,7,8,9,+,-,*,/,=,AC的计算器界面,并且可以实现计算
时间: 2024-05-27 12:15:03 浏览: 12
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
#container {
width: 250px;
margin: 0 auto;
padding: 10px;
background-color: lightgray;
border: 2px solid gray;
border-radius: 5px;
box-shadow: 5px 5px 5px gray;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 10px;
}
td {
width: 25%;
height: 30px;
text-align: center;
border: 1px solid gray;
cursor: pointer;
}
#result {
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 10px;
text-align: right;
font-size: 24px;
border: 1px solid gray;
border-radius: 5px;
background-color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="result"></div>
<table>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="AC">AC</td>
</tr>
<tr>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
<td id="-">-</td>
</tr>
<tr>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="*">*</td>
</tr>
<tr>
<td id="0">0</td>
<td id=".">.</td>
<td id="=">=</td>
<td id="/">/</td>
</tr>
</table>
</div>
<script>
var result = document.getElementById("result");
var operator = null;
var operand1 = null;
var operand2 = null;
function clear() {
result.innerText = "";
operator = null;
operand1 = null;
operand2 = null;
}
function calculate() {
if (operator == null || operand1 == null || operand2 == null) {
return;
}
var num1 = parseFloat(operand1);
var num2 = parseFloat(operand2);
if (isNaN(num1) || isNaN(num2)) {
return;
}
var resultValue = null;
switch (operator) {
case "+":
resultValue = num1 + num2;
break;
case "-":
resultValue = num1 - num2;
break;
case "*":
resultValue = num1 * num2;
break;
case "/":
resultValue = num1 / num2;
break;
}
result.innerText = resultValue;
operator = null;
operand1 = resultValue.toString();
operand2 = null;
}
function appendNumber(number) {
if (operand2 == null) {
result.innerText += number;
operand2 = number;
} else {
result.innerText = result.innerText.slice(0, -1) + number;
operand2 += number;
}
}
function setOperator(op) {
if (operand1 == null) {
operand1 = operand2;
operand2 = null;
}
if (operator != null) {
calculate();
}
operator = op;
}
document.getElementById("0").addEventListener("click", function() {
appendNumber("0");
});
document.getElementById("1").addEventListener("click", function() {
appendNumber("1");
});
document.getElementById("2").addEventListener("click", function() {
appendNumber("2");
});
document.getElementById("3").addEventListener("click", function() {
appendNumber("3");
});
document.getElementById("4").addEventListener("click", function() {
appendNumber("4");
});
document.getElementById("5").addEventListener("click", function() {
appendNumber("5");
});
document.getElementById("6").addEventListener("click", function() {
appendNumber("6");
});
document.getElementById("7").addEventListener("click", function() {
appendNumber("7");
});
document.getElementById("8").addEventListener("click", function() {
appendNumber("8");
});
document.getElementById("9").addEventListener("click", function() {
appendNumber("9");
});
document.getElementById(".").addEventListener("click", function() {
if (operand2 == null) {
result.innerText += ".";
operand2 = "0.";
} else if (operand2.indexOf(".") == -1) {
result.innerText += ".";
operand2 += ".";
}
});
document.getElementById("+").addEventListener("click", function() {
setOperator("+");
});
document.getElementById("-").addEventListener("click", function() {
setOperator("-");
});
document.getElementById("*").addEventListener("click", function() {
setOperator("*");
});
document.getElementById("/").addEventListener("click", function() {
setOperator("/");
});
document.getElementById("=").addEventListener("click", function() {
calculate();
});
document.getElementById("AC").addEventListener("click", function() {
clear();
});
</script>
</body>
</html>