简易计算器

工具 admin · 2026-08-29 · 使用 8
支持加减乘除、小数、百分号、括号和连续运算的轻量计算器，手机电脑通用。
简易计算器
放大后操作
纯前端工具，无后端代码
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>简易计算器</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        body {
            background: #1c1c1e;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
        }
        .calculator {
            width: 100%;
            max-width: 380px;
            background: #2c2c2e;
            border-radius: 30px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }
        .display {
            background: #1c1c1e;
            border-radius: 20px;
            padding: 20px 15px;
            margin-bottom: 15px;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            word-break: break-all;
        }
        .expression {
            color: #8e8e93;
            font-size: 18px;
            min-height: 25px;
            text-align: right;
            width: 100%;
        }
        .result {
            color: #ffffff;
            font-size: 40px;
            font-weight: 300;
            line-height: 1.2;
            margin-top: 5px;
            width: 100%;
            text-align: right;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        .btn {
            background: #3a3a3c;
            border: none;
            border-radius: 16px;
            color: #ffffff;
            font-size: 26px;
            font-weight: 400;
            padding: 18px 0;
            cursor: pointer;
            transition: filter 0.1s;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 60px;
        }
        .btn:active {
            filter: brightness(1.4);
        }
        .btn.operator {
            background: #ff9f0a;
            color: #fff;
        }
        .btn.function {
            background: #505052;
            color: #fff;
            font-size: 22px;
        }
        .btn.equals {
            background: #ff9f0a;
            color: #fff;
        }
        .btn.zero {
            grid-column: span 2;
        }
    </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 function" onclick="clearAll()">C</button>
            <button class="btn function" onclick="deleteLast()">⌫</button>
            <button class="btn function" onclick="togglePercent()">%</button>
            <button class="btn operator" onclick="appendOperator('/')">÷</button>
            
            <button class="btn" onclick="appendNumber('7')">7</button>
            <button class="btn" onclick="appendNumber('8')">8</button>
            <button class="btn" onclick="appendNumber('9')">9</button>
            <button class="btn operator" onclick="appendOperator('*')">×</button>
            
            <button class="btn" onclick="appendNumber('4')">4</button>
            <button class="btn" onclick="appendNumber('5')">5</button>
            <button class="btn" onclick="appendNumber('6')">6</button>
            <button class="btn operator" onclick="appendOperator('-')">−</button>
            
            <button class="btn" onclick="appendNumber('1')">1</button>
            <button class="btn" onclick="appendNumber('2')">2</button>
            <button class="btn" onclick="appendNumber('3')">3</button>
            <button class="btn operator" onclick="appendOperator('+')">+</button>
            
            <button class="btn zero" onclick="appendNumber('0')">0</button>
            <button class="btn" onclick="appendDot()">.</button>
            <button class="btn function" onclick="toggleSign()">±</button>
            <button class="btn equals" onclick="calculate()">=</button>
        </div>
    </div>

    <script>
        let expression = '';
        let lastResult = null;
        let justEvaluated = false;

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

        function updateDisplay() {
            expressionEl.textContent = expression;
            if (expression === '') {
                resultEl.textContent = '0';
            } else {
                try {
                    const val = Function('"use strict"; return (' + expression.replace(/[^0-9+\-*/.()%]/g, '') + ')')();
                    if (typeof val === 'number' && isFinite(val)) {
                        resultEl.textContent = parseFloat(val.toPrecision(12)).toString();
                    } else {
                        resultEl.textContent = '错误';
                    }
                } catch (e) {
                    resultEl.textContent = expression || '0';
                }
            }
        }

        function appendNumber(num) {
            if (justEvaluated) {
                expression = '';
                justEvaluated = false;
            }
            // 防止多个前导0
            const last = expression.slice(-1);
            if (last === '0' && /[^0-9]$/.test(expression) || expression === '0') {
                if (expression === '0') {
                    expression = num;
                } else {
                    expression = expression.slice(0, -1) + num;
                }
            } else {
                expression += num;
            }
            updateDisplay();
        }

        function appendDot() {
            if (justEvaluated) {
                expression = '0.';
                justEvaluated = false;
                updateDisplay();
                return;
            }
            // 找到当前数字段
            const parts = expression.split(/[+\-*/]/);
            const current = parts[parts.length - 1];
            if (current.includes('.')) return;
            if (current === '') {
                expression += '0.';
            } else {
                expression += '.';
            }
            updateDisplay();
        }

        function appendOperator(op) {
            if (expression === '' && op === '-') {
                expression = '-';
                justEvaluated = false;
                updateDisplay();
                return;
            }
            if (expression === '' || expression === '-') return;
            if (justEvaluated) {
                // 用上次结果继续运算
                justEvaluated = false;
                expression = resultEl.textContent;
            }
            const last = expression.slice(-1);
            if (['+', '-', '*', '/'].includes(last)) {
                expression = expression.slice(0, -1);
            }
            expression += op;
            updateDisplay();
        }

        function calculate() {
            if (expression === '') return;
            try {
                let sanitized = expression.replace(/[^0-9+\-*/.()%]/g, '');
                if (sanitized === '') return;
                // 处理百分号
                sanitized = sanitized.replace(/(\d+\.?\d*)%/g, '($1/100)');
                let val = Function('"use strict"; return (' + sanitized + ')')();
                if (typeof val !== 'number' || !isFinite(val)) {
                    resultEl.textContent = '错误';
                    expression = '';
                    justEvaluated = false;
                    expressionEl.textContent = '';
                    return;
                }
                val = parseFloat(val.toPrecision(12));
                expression = val.toString();
                expressionEl.textContent = expression;
                resultEl.textContent = expression;
                justEvaluated = true;
            } catch (e) {
                resultEl.textContent = '错误';
                expression = '';
                expressionEl.textContent = '';
                justEvaluated = false;
            }
        }

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

        function deleteLast() {
            if (justEvaluated) {
                clearAll();
                return;
            }
            expression = expression.slice(0, -1);
            updateDisplay();
        }

        function toggleSign() {
            if (expression === '' && lastResult !== null) {
                expression = (-parseFloat(lastResult)).toString();
                updateDisplay();
                return;
            }
            if (expression === '') return;
            // 简单处理：取反当前表达式（若为单个数字）
            if (/^-?\d+\.?\d*$/.test(expression)) {
                expression = expression.startsWith('-') ? expression.slice(1) : '-' + expression;
                updateDisplay();
            }
        }

        function togglePercent() {
            if (expression === '') return;
            try {
                let val = Function('"use strict"; return (' + expression + ')')();
                if (typeof val === 'number') {
                    expression = (val / 100).toString();
                    updateDisplay();
                }
            } catch (e) {}
        }

        // 键盘支持
        document.addEventListener('keydown', function(e) {
            e.preventDefault();
            const key = e.key;
            if (key >= '0' && key <= '9') appendNumber(key);
            else if (key === '.') appendDot();
            else if (key === '+') appendOperator('+');
            else if (key === '-') appendOperator('-');
            else if (key === '*') appendOperator('*');
            else if (key === '/') { e.preventDefault(); appendOperator('/'); }
            else if (key === 'Enter' || key === '=') calculate();
            else if (key === 'Backspace') deleteLast();
            else if (key === 'Escape') clearAll();
            else if (key === '%') togglePercent();
        });

        updateDisplay();
    </script>
</body>
</html>
暂无评论，来说两句吧
简易计算器

评论（0）
