iPhone风格的计算器
- HTML
- 2025-11-02
- 65热度
- 0评论
这个iPhone风格的计算器实现了以下功能：
设计特点
- 浅色网页背景（#f5f5f7），黑色计算器主体
- 圆角设计和阴影效果，符合iPhone计算器风格
- 显示屏位于顶部，白色大字体显示
按钮设计
- 数字按钮（0-9）和小数点：灰色背景，白色文字
- 功能按钮（AC、±、%）：浅灰色背景，黑色文字
- 运算符按钮（÷、×、−、+、=）：浅橙色背景
- 零按钮：占据两列宽度，左对齐，圆角设计
功能实现
- 基本四则运算（加减乘除）
- 清除功能（AC）
- 正负切换（±）
- 百分比计算（%）
- 小数点输入
- 按钮点击时的视觉反馈（变暗效果）
计算器具有完整的错误处理，如除零错误，同时支持大数字的科学计数法显示。所有按钮都有适当的点击反馈效果。
网站演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPhone风格计算器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f7;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.calculator {
width: 320px;
background-color: #000;
border-radius: 30px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.display {
width: 100%;
height: 120px;
background-color: #000;
color: white;
text-align: right;
padding: 20px;
font-size: 60px;
font-weight: 300;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.button {
height: 70px;
border-radius: 50%;
border: none;
font-size: 32px;
font-weight: 400;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.2s;
user-select: none;
}
.button:active {
opacity: 0.7;
}
.number, .decimal {
background-color: #333;
color: white;
}
.function {
background-color: #a5a5a7;
color: black;
}
.operator {
background-color: #f1a33c;
color: white;
}
.zero {
grid-column: span 2;
border-radius: 35px;
justify-content: flex-start;
padding-left: 28px;
}
.equals {
background-color: #f1a33c;
color: white;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="button function" onclick="clearAll()">AC</button>
<button class="button function" onclick="toggleSign()">±</button>
<button class="button function" onclick="percentage()">%</button>
<button class="button operator" onclick="setOperation('÷')">÷</button>
<button class="button number" onclick="appendNumber('7')">7</button>
<button class="button number" onclick="appendNumber('8')">8</button>
<button class="button number" onclick="appendNumber('9')">9</button>
<button class="button operator" onclick="setOperation('×')">×</button>
<button class="button number" onclick="appendNumber('4')">4</button>
<button class="button number" onclick="appendNumber('5')">5</button>
<button class="button number" onclick="appendNumber('6')">6</button>
<button class="button operator" onclick="setOperation('-')">−</button>
<button class="button number" onclick="appendNumber('1')">1</button>
<button class="button number" onclick="appendNumber('2')">2</button>
<button class="button number" onclick="appendNumber('3')">3</button>
<button class="button operator" onclick="setOperation('+')">+</button>
<button class="button number zero" onclick="appendNumber('0')">0</button>
<button class="button number decimal" onclick="addDecimal()">.</button>
<button class="button operator equals" onclick="calculate()">=</button>
</div>
</div>
<script>
let currentInput = '0';
let previousInput = '';
let operation = null;
let shouldResetDisplay = false;
const display = document.getElementById('display');
function updateDisplay() {
// 格式化显示数字，限制长度
let displayValue = currentInput;
if (displayValue.length > 10) {
displayValue = parseFloat(displayValue).toExponential(5);
}
display.textContent = displayValue;
}
function appendNumber(number) {
if (currentInput === '0' || shouldResetDisplay) {
currentInput = number;
shouldResetDisplay = false;
} else {
currentInput += number;
}
updateDisplay();
}
function addDecimal() {
if (shouldResetDisplay) {
currentInput = '0.';
shouldResetDisplay = false;
updateDisplay();
return;
}
if (!currentInput.includes('.')) {
currentInput += '.';
updateDisplay();
}
}
function clearAll() {
currentInput = '0';
previousInput = '';
operation = null;
shouldResetDisplay = false;
updateDisplay();
}
function toggleSign() {
currentInput = (parseFloat(currentInput) * -1).toString();
updateDisplay();
}
function percentage() {
currentInput = (parseFloat(currentInput) / 100).toString();
updateDisplay();
}
function setOperation(op) {
if (operation !== null) calculate();
previousInput = currentInput;
operation = op;
shouldResetDisplay = true;
}
function calculate() {
if (operation === null || shouldResetDisplay) return;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
let result;
switch (operation) {
case '+':
result = prev + current;
break;
case '−':
result = prev - current;
break;
case '×':
result = prev * current;
break;
case '÷':
if (current === 0) {
result = '错误';
} else {
result = prev / current;
}
break;
default:
return;
}
// 处理结果显示
if (result === '错误') {
currentInput = result;
} else {
// 如果结果是整数，显示为整数
if (Number.isInteger(result)) {
currentInput = result.toString();
} else {
// 保留适当的小数位数
currentInput = parseFloat(result.toFixed(10)).toString();
}
}
operation = null;
previousInput = '';
shouldResetDisplay = true;
updateDisplay();
}
// 初始化显示
updateDisplay();
</script>
</body>
</html>
