JavaScript 计算器程序：实现加减乘除、小数点和清零功能
这是一个基本的计算器程序，支持加减乘除、小数点和清零功能。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
text-align: center;
}
#calculator {
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
width: 300px;
}
#result {
font-size: 36px;
margin-bottom: 20px;
padding: 10px;
text-align: right;
border: none;
background-color: #eee;
width: 100%;
box-sizing: border-box;
}
.button {
font-size: 24px;
padding: 10px;
margin: 5px;
width: 50px;
height: 50px;
border: none;
border-radius: 5px;
background-color: #ccc;
cursor: pointer;
}
.button:hover {
background-color: #bbb;
}
.button:active {
background-color: #999;
}
</style>
</head>
<body>
<div id='calculator'>
<input type='text' id='result' readonly>
<button class='button' onclick='appendNumber('7')'>7</button>
<button class='button' onclick='appendNumber('8')'>8</button>
<button class='button' onclick='appendNumber('9')'>9</button>
<button class='button' onclick='operator('+')'>+</button><br>
<button class='button' onclick='appendNumber('4')'>4</button>
<button class='button' onclick='appendNumber('5')'>5</button>
<button class='button' onclick='appendNumber('6')'>6</button>
<button class='button' onclick='operator('-')'>-</button><br>
<button class='button' onclick='appendNumber('1')'>1</button>
<button class='button' onclick='appendNumber('2')'>2</button>
<button class='button' onclick='appendNumber('3')'>3</button>
<button class='button' onclick='operator('*')'>*</button><br>
<button class='button' onclick='appendNumber('0')'>0</button>
<button class='button' onclick='appendDecimal()'>.</button>
<button class='button' onclick='clearResult()'>C</button>
<button class='button' onclick='operator('/')'>/</button><br>
<button class='button' onclick='calculate()'>=</button>
</div>
<script src='calculator.js'></script>
</body>
</html>
JavaScript 代码：
var result = document.getElementById('result');
function appendNumber(num) {
if (result.value === '0') {
result.value = num;
} else {
result.value += num;
}
}
function appendDecimal() {
if (result.value.indexOf('.') === -1) {
result.value += '.';
}
}
function clearResult() {
result.value = '0';
}
function operator(op) {
result.value += op;
}
function calculate() {
result.value = eval(result.value);
}
原文地址: https://www.cveoy.top/t/topic/lBVa 著作权归作者所有。请勿转载和采集!