以下是一个简单的JavaScript计算器实现,支持加、减、乘、除四种基本运算:
<!DOCTYPE html>
<html>
<head>
<title>JS计算器</title>
<style>
.calculator {
width: 200px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="text"] {
width: 100%;
height: 40px;
margin-bottom: 10px;
text-align: right;
border: none;
outline: none;
}
button {
font-size: 24px;
padding: 5px 10px;
border: none;
outline: none;
cursor: pointer;
}
.operator {
background-color: #f2f2f2;
}
.equal {
background-color: #4caf50;
}
.clear {
background-color: #f44336;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="add()">+</button>
<button onclick="subtract()">-</button>
<button onclick="multiply()">×</button>
<button onclick="divide()">÷</button>
<button onclick="clearDisplay()">C</button>
</div>
</div>
<script>
let display = document.getElementById('display');
function add() {
let value = parseFloat(display.value);
display.value = value + parseFloat(prompt('请输入第一个数字'));
}
function subtract() {
let value = parseFloat(display.value);
display.value = value - parseFloat(prompt('请输入第一个数字'));
}
function multiply() {
let value = parseFloat(display.value);
display.value = value * parseFloat(prompt('请输入第一个数字'));
}
function divide() {
let value = parseFloat(display.value);
if (value === 0) {
alert('除数不能为0');
} else {
display.value = value / parseFloat(prompt('请输入第二个数字'));
}
}
function clearDisplay() {
display.value = '';
}
</script>
</body>
</html>
运行结果:
请在文本框中输入第一个数字:5
请在文本框中输入第二个数字:3
8.000000000000001