为了实现这个iPhone风格的计算器，我们将编写一个完整的HTML页面，其中包含CSS样式和JavaScript逻辑。
以下是关于这个iPhone风格计算器的关键功能和设计的详细介绍：
关键功能
- 显示区域 (
display):
- 显示当前输入的数字或计算结果。
- 初始状态下显示为
0。
- 数字按钮 (
gray-button):
- 包括数字
0-9和小数点.按钮。 - 点击时将数字或小数点添加到当前输入中。
- 零按钮 (
zero-button) 占据两列宽度，并且左对齐。
- 功能按钮 (
light-gray-button):
AC: 清除所有输入和状态，重置显示为0。±: 切换当前输入的正负号。%: 计算当前输入的百分比值。
- 运算符按钮 (
orange-button):
- 包括加法
+, 减法-, 乘法×, 除法÷, 和等于=按钮。 - 点击时设置当前操作符并准备进行计算。
=按钮用于执行最终的计算并将结果显示在屏幕上。
设计特点
- 整体布局:
- 使用 Flexbox 将计算器居中放置在页面上。
- 背景颜色为浅色 (
#f7f7f7)，以突出计算器本身。
- 计算器外观:
- 黑色背景 (
#1d1d26) 并带有圆角 (border-radius: 40px)。 - 添加阴影效果 (
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3)) 增强立体感。
- 显示屏样式:
- 白色字体 (
color: white) 和较大的字号 (font-size: 40px)。 - 居右对齐文本，底部有一条细线分隔 (
border-bottom: 1px solid #333)。
- 按钮样式:
- 数字按钮使用灰色背景 (
background-color: #333) 和白色文字 (color: white)。 - 功能按钮使用浅灰色背景 (
background-color: #666) 和黑色文字 (color: black)。 - 运算符按钮使用浅橙色背景 (
background-color: #ff9500)。 - 所有按钮在悬停时背景颜色加深 (
transition: background-color 0.3s)。
- 零按钮设计:
- 占据两列宽度 (
grid-column: span 2)。 - 左对齐并且有一个较大的圆角 (
border-top-left-radius: 20px)。
通过这些设计和功能实现，你可以获得一个直观且易于使用的iPhone风格计算器体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPhone Style Calculator</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f7f7f7;
margin: 0;
}
.calculator {
width: 350px;
background-color: #1d1d26;
border-radius: 40px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
overflow: hidden;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.display {
height: 120px;
background-color: #1e1e2a;
color: white;
text-align: right;
padding-right: 20px;
line-height: 120px;
font-size: 40px;
border-bottom: 1px solid #333;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
button {
height: 70px;
font-size: 24px;
border: none;
outline: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #333;
}
.gray-button {
background-color: #333;
color: white;
}
.light-gray-button {
background-color: #666;
color: black;
}
.orange-button {
background-color: #ff9500;
color: white;
}
.zero-button {
grid-column: span 2;
border-top-left-radius: 20px;
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="light-gray-button" onclick="clearDisplay()">AC</button>
<button class="light-gray-button" onclick="toggleSign()">±</button>
<button class="light-gray-button" onclick="calculatePercentage()">%</button>
<button class="orange-button" onclick="appendOperator('÷')">÷</button>
<button class="gray-button" onclick="appendNumber('7')">7</button>
<button class="gray-button" onclick="appendNumber('8')">8</button>
<button class="gray-button" onclick="appendNumber('9')">9</button>
<button class="orange-button" onclick="appendOperator('×')">×</button>
<button class="gray-button" onclick="appendNumber('4')">4</button>
<button class="gray-button" onclick="appendNumber('5')">5</button>
<button class="gray-button" onclick="appendNumber('6')">6</button>
<button class="orange-button" onclick="appendOperator('-')">−</button>
<button class="gray-button" onclick="appendNumber('1')">1</button>
<button class="gray-button" onclick="appendNumber('2')">2</button>
<button class="gray-button" onclick="appendNumber('3')">3</button>
<button class="orange-button" onclick="appendOperator('+')">+</button>
<button class="gray-button zero-button" onclick="appendNumber('0')">0</button>
<button class="gray-button" onclick="appendDecimal('.')">.</button>
<button class="orange-button" onclick="calculateResult()">=</button>
</div>
</div>
<script>
let currentInput = '';
let operator = null;
let previousInput = '';
function clearDisplay() {
currentInput = '';
operator = null;
previousInput = '';
updateDisplay();
}
function toggleSign() {
currentInput = currentInput.charAt(0) === '-' ? currentInput.slice(1) : '-' + currentInput;
updateDisplay();
}
function calculatePercentage() {
if (currentInput !== '') {
currentInput = (parseFloat(currentInput) / 100).toString();
updateDisplay();
}
}
function appendNumber(number) {
if (number === '.' && currentInput.includes('.')) return;
currentInput += number;
updateDisplay();
}
function appendDecimal(dot) {
if (!currentInput.includes(dot)) {
currentInput += dot;
}
updateDisplay();
}
function appendOperator(op) {
if (currentInput === '' && previousInput === '') return;
if (previousInput !== '') {
calculateResult();
}
operator = op;
previousInput = currentInput;
currentInput = '';
}
function calculateResult() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operator) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '×':
result = prev * current;
break;
case '÷':
result = prev / current;
break;
default:
return;
}
currentInput = result.toString();
operator = null;
previousInput = '';
updateDisplay();
}
function updateDisplay() {
document.getElementById('display').innerText = currentInput || '0';
}
</script>
</body>
</html>
No responses yet