<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>简易计算器</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
body {
background: #1c1c1e;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
}
.calculator {
width: 100%;
max-width: 380px;
background: #2c2c2e;
border-radius: 30px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.display {
background: #1c1c1e;
border-radius: 20px;
padding: 20px 15px;
margin-bottom: 15px;
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
word-break: break-all;
}
.expression {
color: #8e8e93;
font-size: 18px;
min-height: 25px;
text-align: right;
width: 100%;
}
.result {
color: #ffffff;
font-size: 40px;
font-weight: 300;
line-height: 1.2;
margin-top: 5px;
width: 100%;
text-align: right;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.btn {
background: #3a3a3c;
border: none;
border-radius: 16px;
color: #ffffff;
font-size: 26px;
font-weight: 400;
padding: 18px 0;
cursor: pointer;
transition: filter 0.1s;
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
}
.btn:active {
filter: brightness(1.4);
}
.btn.operator {
background: #ff9f0a;
color: #fff;
}
.btn.function {
background: #505052;
color: #fff;
font-size: 22px;
}
.btn.equals {
background: #ff9f0a;
color: #fff;
}
.btn.zero {
grid-column: span 2;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display">
<div class="expression" id="expression"></div>
<div class="result" id="result">0</div>
</div>
<div class="buttons">
<button class="btn function" onclick="clearAll()">C</button>
<button class="btn function" onclick="deleteLast()">⌫</button>
<button class="btn function" onclick="togglePercent()">%</button>
<button class="btn operator" onclick="appendOperator('/')">÷</button>
<button class="btn" onclick="appendNumber('7')">7</button>
<button class="btn" onclick="appendNumber('8')">8</button>
<button class="btn" onclick="appendNumber('9')">9</button>
<button class="btn operator" onclick="appendOperator('*')">×</button>
<button class="btn" onclick="appendNumber('4')">4</button>
<button class="btn" onclick="appendNumber('5')">5</button>
<button class="btn" onclick="appendNumber('6')">6</button>
<button class="btn operator" onclick="appendOperator('-')">−</button>
<button class="btn" onclick="appendNumber('1')">1</button>
<button class="btn" onclick="appendNumber('2')">2</button>
<button class="btn" onclick="appendNumber('3')">3</button>
<button class="btn operator" onclick="appendOperator('+')">+</button>
<button class="btn zero" onclick="appendNumber('0')">0</button>
<button class="btn" onclick="appendDot()">.</button>
<button class="btn function" onclick="toggleSign()">±</button>
<button class="btn equals" onclick="calculate()">=</button>
</div>
</div>
<script>
let expression = '';
let lastResult = null;
let justEvaluated = false;
const expressionEl = document.getElementById('expression');
const resultEl = document.getElementById('result');
function updateDisplay() {
expressionEl.textContent = expression;
if (expression === '') {
resultEl.textContent = '0';
} else {
try {
const val = Function('"use strict"; return (' + expression.replace(/[^0-9+\-*/.()%]/g, '') + ')')();
if (typeof val === 'number' && isFinite(val)) {
resultEl.textContent = parseFloat(val.toPrecision(12)).toString();
} else {
resultEl.textContent = '错误';
}
} catch (e) {
resultEl.textContent = expression || '0';
}
}
}
function appendNumber(num) {
if (justEvaluated) {
expression = '';
justEvaluated = false;
}
// 防止多个前导0
const last = expression.slice(-1);
if (last === '0' && /[^0-9]$/.test(expression) || expression === '0') {
if (expression === '0') {
expression = num;
} else {
expression = expression.slice(0, -1) + num;
}
} else {
expression += num;
}
updateDisplay();
}
function appendDot() {
if (justEvaluated) {
expression = '0.';
justEvaluated = false;
updateDisplay();
return;
}
// 找到当前数字段
const parts = expression.split(/[+\-*/]/);
const current = parts[parts.length - 1];
if (current.includes('.')) return;
if (current === '') {
expression += '0.';
} else {
expression += '.';
}
updateDisplay();
}
function appendOperator(op) {
if (expression === '' && op === '-') {
expression = '-';
justEvaluated = false;
updateDisplay();
return;
}
if (expression === '' || expression === '-') return;
if (justEvaluated) {
// 用上次结果继续运算
justEvaluated = false;
expression = resultEl.textContent;
}
const last = expression.slice(-1);
if (['+', '-', '*', '/'].includes(last)) {
expression = expression.slice(0, -1);
}
expression += op;
updateDisplay();
}
function calculate() {
if (expression === '') return;
try {
let sanitized = expression.replace(/[^0-9+\-*/.()%]/g, '');
if (sanitized === '') return;
// 处理百分号
sanitized = sanitized.replace(/(\d+\.?\d*)%/g, '($1/100)');
let val = Function('"use strict"; return (' + sanitized + ')')();
if (typeof val !== 'number' || !isFinite(val)) {
resultEl.textContent = '错误';
expression = '';
justEvaluated = false;
expressionEl.textContent = '';
return;
}
val = parseFloat(val.toPrecision(12));
expression = val.toString();
expressionEl.textContent = expression;
resultEl.textContent = expression;
justEvaluated = true;
} catch (e) {
resultEl.textContent = '错误';
expression = '';
expressionEl.textContent = '';
justEvaluated = false;
}
}
function clearAll() {
expression = '';
lastResult = null;
justEvaluated = false;
updateDisplay();
}
function deleteLast() {
if (justEvaluated) {
clearAll();
return;
}
expression = expression.slice(0, -1);
updateDisplay();
}
function toggleSign() {
if (expression === '' && lastResult !== null) {
expression = (-parseFloat(lastResult)).toString();
updateDisplay();
return;
}
if (expression === '') return;
// 简单处理：取反当前表达式（若为单个数字）
if (/^-?\d+\.?\d*$/.test(expression)) {
expression = expression.startsWith('-') ? expression.slice(1) : '-' + expression;
updateDisplay();
}
}
function togglePercent() {
if (expression === '') return;
try {
let val = Function('"use strict"; return (' + expression + ')')();
if (typeof val === 'number') {
expression = (val / 100).toString();
updateDisplay();
}
} catch (e) {}
}
// 键盘支持
document.addEventListener('keydown', function(e) {
e.preventDefault();
const key = e.key;
if (key >= '0' && key <= '9') appendNumber(key);
else if (key === '.') appendDot();
else if (key === '+') appendOperator('+');
else if (key === '-') appendOperator('-');
else if (key === '*') appendOperator('*');
else if (key === '/') { e.preventDefault(); appendOperator('/'); }
else if (key === 'Enter' || key === '=') calculate();
else if (key === 'Backspace') deleteLast();
else if (key === 'Escape') clearAll();
else if (key === '%') togglePercent();
});
updateDisplay();
</script>
</body>
</html>