HTML 计算器程序代码：简单易懂，可定制化
<!DOCTYPE html>
<html>
<head>
<title>HTML 计算器</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
<pre><code>#calculator {
margin: 100px auto;
width: 320px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
border-radius: 4px;
overflow: hidden;
}
#result {
height: 60px;
line-height: 60px;
text-align: right;
padding: 0 20px;
font-size: 24px;
background-color: #f9f9f9;
border-bottom: 1px solid #ccc;
}
#buttons {
padding: 20px;
}
.button {
width: 60px;
height: 60px;
font-size: 24px;
margin: 5px;
background-color: #e0e0e0;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #d0d0d0;
}
#equals {
background-color: #4CAF50;
color: #fff;
}
</code></pre>
</style>
</head>
<body>
<div id="calculator">
<div id="result"></div>
<div id="buttons">
<button class="button" onclick="clearResult()">C</button>
<button class="button" onclick="deleteLast()">Del</button>
<button class="button" onclick="append('+')">+</button>
<button class="button" onclick="append('7')">7</button>
<button class="button" onclick="append('8')">8</button>
<button class="button" onclick="append('9')">9</button>
<button class="button" onclick="append('-')">-</button>
<button class="button" onclick="append('4')">4</button>
<button class="button" onclick="append('5')">5</button>
<button class="button" onclick="append('6')">6</button>
<button class="button" onclick="append('*')">*</button>
<button class="button" onclick="append('1')">1</button>
<button class="button" onclick="append('2')">2</button>
<button class="button" onclick="append('3')">3</button>
<button class="button" onclick="append('/')">/</button>
<button class="button" onclick="append('0')">0</button>
<button class="button" onclick="append('.')">.</button>
<button id="equals" class="button" onclick="calculate()">=</button>
</div>
</div>
<script>
function clearResult() {
document.getElementById('result').innerHTML = '';
}
function deleteLast() {
var result = document.getElementById('result').innerHTML;
document.getElementById('result').innerHTML = result.slice(0, -1);
}
function append(value) {
document.getElementById('result').innerHTML += value;
}
function calculate() {
var result = document.getElementById('result').innerHTML;
var answer = eval(result);
document.getElementById('result').innerHTML = answer;
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/p53i 著作权归作者所有。请勿转载和采集!