2025-02-11

【html系列】如何实现一个iPhone风格的计算器

这个教程中，我们将创建一个具有iPhone风格的计算器网页。这个计算器不仅外观美观，而且功能齐全，支持基本的算术运算、清除操作、正负切换和百分比计算。我们使用HTML、CSS和JavaScript来构建这个项目。

项目概述

我们的目标是创建一个简洁且易于使用的计算器，其特点包括：

浅色背景下的黑色圆角计算器主体
显示屏位于顶部，显示当前输入或计算结果
数字按钮、功能按钮和运算符按钮有不同的样式
按钮点击时背景颜色加深
零按钮占据两列宽度，并且左对齐，圆角较大但并不占满

步骤一：设置HTML结构

首先，我们需要创建一个基本的HTML结构。这将包含计算器的显示屏和所有按钮。

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div class="display" id="display">0</div>
        <div class="buttons">
            <button class="func" onclick="clearDisplay()">AC</button>
            <button class="func" onclick="toggleSign()">±</button>
            <button class="func" onclick="calculatePercentage()">%</button>
            <button class="operator" onclick="appendOperator('÷')">÷</button>
            <button class="num" onclick="appendNumber('7')">7</button>
            <button class="num" onclick="appendNumber('8')">8</button>
            <button class="num" onclick="appendNumber('9')">9</button>
            <button class="operator" onclick="appendOperator('×')">×</button>
            <button class="num" onclick="appendNumber('4')">4</button>
            <button class="num" onclick="appendNumber('5')">5</button>
            <button class="num" onclick="appendNumber('6')">6</button>
            <button class="operator" onclick="appendOperator('−')">−</button>
            <button class="num" onclick="appendNumber('1')">1</button>
            <button class="num" onclick="appendNumber('2')">2</button>
            <button class="num" onclick="appendNumber('3')">3</button>
            <button class="operator" onclick="appendOperator('+')">+</button>
            <button class="num zero" onclick="appendNumber('0')">0</button>
            <button class="num" onclick="appendDecimal('.')">.</button>
            <button class="operator" onclick="calculateResult()">=</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

步骤二：添加CSS样式

接下来，我们将添加CSS样式以美化计算器。这些样式将确保计算器看起来像一个真实的iPhone计算器。

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f7f7f7;
    margin: 0;
    font-family: Arial, sans-serif;
}

.calculator {
    width: 350px;
    padding: 20px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #000;
    color: white;
}

.display {
    text-align: right;
    padding: 20px;
    font-size: 3em;
    background-color: #1e1e1e;
    border-radius: 25px;
    margin-bottom: 20px;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

button {
    padding: 25px;
    font-size: 1.5em;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button.num {
    background-color: #333;
    color: white;
}

button.num:hover {
    background-color: #555;
}

button.func {
    background-color: #a9a9a9;
    color: black;
}

button.func:hover {
    background-color: #d3d3d3;
}

button.operator {
    background-color: #ff9500;
}

button.operator:hover {
    background-color: #ffa500;
}

button.zero {
    grid-column: span 2;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

步骤三：编写JavaScript逻辑

最后，我们将编写JavaScript代码来处理计算器的各种操作，如数字输入、运算符选择、结果显示等。

// script.js
let currentInput = '';
let previousInput = '';
let operator = null;

function clearDisplay() {
    currentInput = '';
    previousInput = '';
    operator = null;
    updateDisplay();
}

function toggleSign() {
    if (currentInput === '') return;
    currentInput = (parseFloat(currentInput) * -1).toString();
    updateDisplay();
}

function calculatePercentage() {
    if (currentInput === '' || operator === null) return;
    const percentValue = parseFloat(currentInput) / 100;
    currentInput = percentValue.toString();
    updateDisplay();
}

function appendNumber(number) {
    if (currentInput.length >= 12) return; // Limit to 12 digits
    if (currentInput.includes('.') && number === '.') return; // Prevent multiple dots
    currentInput += number;
    updateDisplay();
}

function appendDecimal(dot) {
    if (currentInput.includes('.')) return;
    currentInput += dot;
    updateDisplay();
}

function appendOperator(op) {
    if (currentInput === '') 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() {
    const display = document.getElementById('display');
    display.textContent = currentInput === '' ? '0' : currentInput;
}

结论

通过以上步骤，你已经成功地创建了一个具有iPhone风格的计算器网页。你可以根据自己的喜好进一步调整样式和功能，使其更加个性化。希望这个教程对你有所帮助！

如果你有任何问题或建议，请随时在评论区留言。祝你编程愉快！

MRCHE

CheYida's Blog

【html系列】如何实现一个iPhone风格的计算器

项目概述

步骤一：设置HTML结构

步骤二：添加CSS样式

步骤三：编写JavaScript逻辑

结论