多功能计算器

admin 2026-08-16 154 0

计算工具

一个支持基本运算、科学计算和表达式求值的多功能计算器，前后端双模式运行，确保离线可用。

多功能计算器

可直接操作

<!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>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            user-select: none;
            -webkit-user-select: none;
        }
        .calculator {
            background: #ffffff;
            border-radius: 30px;
            padding: 25px;
            width: 380px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .display {
            background: #f0f4f8;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: right;
            min-height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            word-break: break-all;
        }
        .expression {
            font-size: 18px;
            color: #666;
            min-height: 24px;
            margin-bottom: 10px;
        }
        .result {
            font-size: 36px;
            font-weight: bold;
            color: #1e3c72;
            min-height: 45px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        button {
            padding: 18px;
            font-size: 20px;
            border: none;
            border-radius: 18px;
            cursor: pointer;
            background: #e8eef5;
            color: #1e3c72;
            transition: all 0.2s;
            font-weight: 600;
            -webkit-tap-highlight-color: transparent;
        }
        button:hover {
            background: #d0dce8;
            transform: scale(1.05);
        }
        button:active {
            transform: scale(0.95);
        }
        .op {
            background: #ffd166;
            color: #333;
        }
        .op:hover {
            background: #f0b84e;
        }
        .func {
            background: #a8dadc;
            color: #1e3c72;
        }
        .func:hover {
            background: #8bc9cc;
        }
        .equals {
            background: #e63946;
            color: white;
            grid-column: span 2;
        }
        .equals:hover {
            background: #d62839;
        }
        .clear {
            background: #f4a261;
            color: white;
        }
        .clear:hover {
            background: #e08e4a;
        }
    </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="clear" onclick="clearAll()">C</button>
            <button class="func" onclick="appendFunc('sqrt(')">√</button>
            <button class="func" onclick="appendFunc('pow(')">x^y</button>
            <button class="op" onclick="append('÷')">÷</button>
            <button onclick="append('7')">7</button>
            <button onclick="append('8')">8</button>
            <button onclick="append('9')">9</button>
            <button class="op" onclick="append('×')">×</button>
            <button onclick="append('4')">4</button>
            <button onclick="append('5')">5</button>
            <button onclick="append('6')">6</button>
            <button class="op" onclick="append('−')">−</button>
            <button onclick="append('1')">1</button>
            <button onclick="append('2')">2</button>
            <button onclick="append('3')">3</button>
            <button class="op" onclick="append('+')">+</button>
            <button onclick="append('0')">0</button>
            <button onclick="append('.')">.</button>
            <button onclick="append('(')">(</button>
            <button onclick="append(')')">)</button>
            <button class="equals" onclick="calculate()">=</button>
        </div>
    </div>
    <script>
        let expression = '';
        const exprDisplay = document.getElementById('expression');
        const resultDisplay = document.getElementById('result');

        function append(char) {
            expression += char;
            exprDisplay.textContent = expression;
        }

        function appendFunc(func) {
            expression += func;
            exprDisplay.textContent = expression;
        }

        function clearAll() {
            expression = '';
            exprDisplay.textContent = '';
            resultDisplay.textContent = '0';
        }

        async function calculate() {
            if (!expression) return;
            try {
                const response = await fetch('/api/process', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ expression: expression })
                });
                const data = await response.json();
                if (data.error) {
                    resultDisplay.textContent = '错误';
                } else {
                    resultDisplay.textContent = data.result;
                }
            } catch (e) {
                // 降级到本地计算
                const result = localProcess(expression);
                resultDisplay.textContent = result.error ? '错误' : result.result;
            }
        }

        function localProcess(expr) {
            let sanitized = expr.replace(/×/g, '*').replace(/÷/g, '/').replace(/−/g, '-');
            sanitized = sanitized.replace(/sqrt\(/g, 'Math.sqrt(');
            sanitized = sanitized.replace(/pow\(/g, 'Math.pow(');
            try {
                const result = eval(sanitized);
                if (typeof result === 'number' && isFinite(result)) {
                    return { result: result };
                }
                return { error: '无效结果' };
            } catch (e) {
                return { error: '计算错误' };
            }
        }

        // 键盘支持
        document.addEventListener('keydown', (e) => {
            if (e.key >= '0' && e.key <= '9' || e.key === '.' || e.key === '(' || e.key === ')' || e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
                if (e.key === '*') append('×');
                else if (e.key === '/') append('÷');
                else append(e.key);
            } else if (e.key === 'Enter') {
                calculate();
            } else if (e.key === 'Backspace') {
                expression = expression.slice(0, -1);
                exprDisplay.textContent = expression;
            } else if (e.key === 'Escape') {
                clearAll();
            }
        });
    </script>
</body>
</html>

python app.py

from flask import Flask, request, jsonify
from flask_cors import CORS
import math
import re

app = Flask(__name__)
CORS(app)  # 允许跨域

# 健康检查接口
@app.route('/api/health', methods=['GET'])
def health():
    return jsonify({'status': 'ok', 'message': '计算器服务运行中'})

# 处理计算请求
@app.route('/api/process', methods=['POST'])
def process():
    data = request.get_json()
    if not data or 'expression' not in data:
        return jsonify({'error': '缺少表达式参数'}), 400
    
    expression = data['expression']
    
    # 替换用户输入的符号
    expr = expression.replace('×', '*').replace('÷', '/').replace('−', '-')
    
    # 安全检查：只允许数字、运算符、括号、函数
    if not re.match(r'^[0-9+\-*/(). sqrtpow]*$', expr, re.IGNORECASE):
        return jsonify({'error': '表达式包含非法字符'}), 400
    
    # 处理函数
    expr = re.sub(r'sqrt\(', 'math.sqrt(', expr, flags=re.IGNORECASE)
    expr = re.sub(r'pow\(', 'math.pow(', expr, flags=re.IGNORECASE)
    
    try:
        # 安全执行
        result = eval(expr, {'math': math}, {})
        if isinstance(result, complex):
            return jsonify({'error': '不支持复数结果'}), 400
        result = float(result)
        if math.isnan(result) or math.isinf(result):
            return jsonify({'error': '结果无效'}), 400
        return jsonify({'result': result})
    except Exception as e:
        return jsonify({'error': f'计算错误: {str(e)}'}), 400

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

0 0 0 条评论

暂无评论