简易计算器

工具 admin · 2026-08-29 · 使用 3
一个支持四则运算、小数、括号和清除功能的手机友好型计算器。
简易计算器
放大后操作
纯前端工具，无后端代码
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>简易计算器</title>
    <style>
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #1c1f26;
            font-family: 'Segoe UI', Roboto, sans-serif;
            padding: 12px;
        }
        .calculator {
            width: 100%;
            max-width: 400px;
            background: #2d323c;
            border-radius: 24px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }
        .display {
            background: #1e2229;
            border-radius: 16px;
            padding: 20px 16px;
            margin-bottom: 16px;
            min-height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            overflow: hidden;
        }
        .expression {
            font-size: 18px;
            color: #8a93a3;
            word-break: break-all;
            text-align: right;
            min-height: 24px;
            max-height: 48px;
            overflow-y: auto;
            width: 100%;
        }
        .result {
            font-size: 40px;
            color: #ffffff;
            font-weight: 600;
            word-break: break-all;
            text-align: right;
            width: 100%;
            line-height: 1.2;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        .btn {
            height: 64px;
            border: none;
            border-radius: 16px;
            font-size: 24px;
            font-weight: 500;
            background: #3a4150;
            color: #e8ecf1;
            cursor: pointer;
            transition: filter 0.1s, transform 0.05s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btn:active {
            filter: brightness(1.4);
            transform: scale(0.95);
        }
        .btn.function {
            background: #4c5568;
            color: #ffb74d;
        }
        .btn.operator {
            background: #ff9d2e;
            color: #1c1f26;
            font-size: 28px;
        }
        .btn.equals {
            background: #ff9d2e;
            color: #1c1f26;
            grid-column: span 1;
        }
        .btn.zero {
            grid-column: span 2;
        }
        .btn.clear {
            background: #e05a5a;
            color: white;
        }
        .btn.backspace {
            background: #4c5568;
            color: #ffb74d;
        }
    </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 clear" onclick="clearAll()">AC</button>
            <button class="btn backspace" onclick="backspace()">⌫</button>
            <button class="btn function" onclick="addOperator('%')">%</button>
            <button class="btn operator" onclick="addOperator('/')">÷</button>
            
            <button class="btn" onclick="addNumber('7')">7</button>
            <button class="btn" onclick="addNumber('8')">8</button>
            <button class="btn" onclick="addNumber('9')">9</button>
            <button class="btn operator" onclick="addOperator('*')">×</button>
            
            <button class="btn" onclick="addNumber('4')">4</button>
            <button class="btn" onclick="addNumber('5')">5</button>
            <button class="btn" onclick="addNumber('6')">6</button>
            <button class="btn operator" onclick="addOperator('-')">−</button>
            
            <button class="btn" onclick="addNumber('1')">1</button>
            <button class="btn" onclick="addNumber('2')">2</button>
            <button class="btn" onclick="addNumber('3')">3</button>
            <button class="btn operator" onclick="addOperator('+')">+</button>
            
            <button class="btn zero" onclick="addNumber('0')">0</button>
            <button class="btn" onclick="addDot()">.</button>
            <button class="btn equals" onclick="calculate()">=</button>
        </div>
    </div>
    <script>
        let currentExpression = '';
        let lastResult = null;
        let justEvaluated = false;

        const expressionEl = document.getElementById('expression');
        const resultEl = document.getElementById('result');

        function updateDisplay() {
            expressionEl.textContent = currentExpression;
            if (currentExpression === '') {
                resultEl.textContent = '0';
            } else {
                try {
                    const val = Function('"use strict"; return (' + currentExpression + ')')();
                    if (typeof val === 'number' && isFinite(val)) {
                        resultEl.textContent = parseFloat(val.toPrecision(12)).toString();
                    } else {
                        resultEl.textContent = 'Error';
                    }
                } catch (e) {
                    // 不完整表达式，显示当前输入或0
                    const lastChar = currentExpression[currentExpression.length - 1];
                    if (lastChar && '+-*/%'.includes(lastChar)) {
                        resultEl.textContent = '';
                    } else {
                        resultEl.textContent = currentExpression || '0';
                    }
                }
            }
        }

        function addNumber(num) {
            if (justEvaluated) {
                currentExpression = '';
                justEvaluated = false;
            }
            currentExpression += num;
            updateDisplay();
        }

        function addOperator(op) {
            if (justEvaluated) {
                // 在结果后继续运算
                justEvaluated = false;
            }
            if (currentExpression === '' && lastResult !== null && !justEvaluated) {
                currentExpression = lastResult.toString();
            }
            const lastChar = currentExpression[currentExpression.length - 1];
            if (lastChar && '+-*/%'.includes(lastChar)) {
                // 替换最后一个运算符
                currentExpression = currentExpression.slice(0, -1) + op;
            } else if (currentExpression !== '') {
                currentExpression += op;
            } else {
                // 空表达式不允许运算符开头(除非负号)
                if (op === '-') {
                    currentExpression = '-';
                } else {
                    return;
                }
            }
            updateDisplay();
        }

        function addDot() {
            if (justEvaluated) {
                currentExpression = '';
                justEvaluated = false;
            }
            // 检查当前数字是否已有小数点
            const parts = currentExpression.split(/[+\-*/%]/);
            const lastPart = parts[parts.length - 1];
            if (lastPart.includes('.')) {
                return;
            }
            if (currentExpression === '' || /[+\-*/%]/.test(currentExpression[currentExpression.length - 1])) {
                currentExpression += '0.';
            } else {
                currentExpression += '.';
            }
            updateDisplay();
        }

        function calculate() {
            if (currentExpression === '') return;
            try {
                let expr = currentExpression;
                // 将%转换为 /100 处理
                expr = expr.replace(/%/g, '/100');
                // 将× ÷ 转为 * /
                expr = expr.replace(/×/g, '*').replace(/÷/g, '/');
                let val = Function('"use strict"; return (' + expr + ')')();
                if (typeof val !== 'number' || !isFinite(val)) {
                    resultEl.textContent = 'Error';
                    expressionEl.textContent = currentExpression;
                    return;
                }
                val = parseFloat(val.toPrecision(12));
                lastResult = val;
                expressionEl.textContent = currentExpression + ' =';
                resultEl.textContent = val.toString();
                currentExpression = '';
                justEvaluated = true;
            } catch (e) {
                resultEl.textContent = 'Error';
                expressionEl.textContent = currentExpression;
                justEvaluated = false;
            }
        }

        function clearAll() {
            currentExpression = '';
            lastResult = null;
            justEvaluated = false;
            updateDisplay();
        }

        function backspace() {
            if (justEvaluated) {
                currentExpression = lastResult !== null ? lastResult.toString() : '';
                justEvaluated = false;
                return;
            }
            currentExpression = currentExpression.slice(0, -1);
            updateDisplay();
        }

        // 键盘支持
        document.addEventListener('keydown', function(e) {
            const key = e.key;
            if (/[0-9]/.test(key)) {
                addNumber(key);
            } else if (key === '+' || key === '-' || key === '*' || key === '/') {
                addOperator(key);
            } else if (key === '.') {
                addDot();
            } else if (key === 'Enter' || key === '=') {
                e.preventDefault();
                calculate();
            } else if (key === 'Backspace') {
                backspace();
            } else if (key === 'Escape' || key.toLowerCase() === 'c') {
                clearAll();
            }
        });
    </script>
</body>
</html>
暂无评论，来说两句吧
简易计算器

评论（0）
