<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简约计算器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        }

        /* 页面整体样式 */
        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f7; /* 浅灰底色 */
        }

        /* 计算器容器 */
        .calculator {
            background-color: #ffffff;
            width: 360px;
            padding: 24px;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        }

        /* 显示屏样式 */
        .display {
            margin-bottom: 20px;
            text-align: right;
            padding: 16px;
        }

        .input {
            font-size: 42px;
            font-weight: 500;
            color: #1d1d1f;
            min-height: 56px;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* 按键网格布局 */
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        /* 通用按键样式 */
        button {
            height: 64px;
            border: none;
            border-radius: 16px;
            font-size: 22px;
            font-weight: 400;
            background-color: #ffffff; /* 主按键白色 */
            color: #1d1d1f;
            cursor: pointer;
            transition: all 0.15s ease;
            user-select: none;
        }

        /* 操作符/功能键样式 */
        button.operator {
            color: #007aff;
            font-weight: 500;
        }

        /* 等号键高亮样式 */
        button.equals {
            background-color: #007aff; /* 浅蓝色高亮 */
            color: white;
            grid-column: span 1;
        }

        /* 清零/退格键样式 */
        button.clear, button.backspace {
            background-color: #f2f2f7;
        }

        /* 按键点击动画反馈 */
        button:active {
            transform: scale(0.96);
            opacity: 0.8;
        }

        button:hover {
            background-color: #f9f9fb;
        }

        button.equals:hover {
            background-color: #0066cc;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <!-- 计算显示屏 -->
        <div class="display">
            <div id="input" class="input">0</div>
        </div>
        <!-- 按键区域 -->
        <div class="buttons">
            <button class="clear">C</button>
            <button class="backspace">←</button>
            <button class="operator">÷</button>
            <button class="operator">×</button>
            
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button class="operator">-</button>
            
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button class="operator">+</button>
            
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button class="equals" rowspan="2">=</button>
            
            <button>0</button>
            <button>.</button>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const inputDisplay = document.getElementById('input');
        let currentInput = '0';
        let previousInput = '';
        let operator = '';
        let shouldResetInput = false;

        // 更新显示屏
        function updateDisplay() {
            inputDisplay.textContent = currentInput;
        }

        // 数字按键处理
        function appendNumber(number) {
            if (shouldResetInput) {
                currentInput = number;
                shouldResetInput = false;
            } else {
                currentInput = currentInput === '0' ? number : currentInput + number;
            }
            updateDisplay();
        }

        // 小数点处理
        function appendDecimal() {
            if (shouldResetInput) {
                currentInput = '0.';
                shouldResetInput = false;
            } else if (!currentInput.includes('.')) {
                currentInput += '.';
            }
            updateDisplay();
        }

        // 运算符处理
        function setOperator(op) {
            previousInput = currentInput;
            operator = op;
            shouldResetInput = true;
        }

        // 计算功能
        function calculate() {
            if (operator === '' || shouldResetInput) return;
            
            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 = current === 0 ? '错误' : prev / current;
                    break;
                default:
                    return;
            }

            // 处理结果格式
            currentInput = result.toString();
            previousInput = '';
            operator = '';
            shouldResetInput = true;
            updateDisplay();
        }

        // 清零功能
        function clear() {
            currentInput = '0';
            previousInput = '';
            operator = '';
            shouldResetInput = false;
            updateDisplay();
        }

        // 退格功能
        function backspace() {
            currentInput = currentInput.length === 1 ? '0' : currentInput.slice(0, -1);
            updateDisplay();
        }

        // 绑定按键点击事件
        document.querySelectorAll('button').forEach(button => {
            button.addEventListener('click', () => {
                const value = button.textContent;

                if (!isNaN(value) || value === '.') {
                    value === '.' ? appendDecimal() : appendNumber(value);
                } else if (value === 'C') {
                    clear();
                } else if (value === '←') {
                    backspace();
                } else if (value === '=') {
                    calculate();
                } else {
                    setOperator(value);
                }
            });
        });
    </script>
</body>
</html>