用php js怎么编写计算器

用PHP和JavaScript编写计算器

在构建一个基于PHP和JavaScript的计算器时，主要需要考虑以下几点：界面设计、前端逻辑处理、后端支持。在这篇文章中，我们将详细探讨这些方面，并提供实际的代码示例来帮助你实现这个功能。

一、界面设计

使用HTML和CSS设计一个简洁而直观的用户界面是实现计算器的第一步。界面设计不仅要美观，还要功能齐全，用户体验友好。

1. HTML结构

HTML的结构决定了计算器的外观和功能布局。通常，一个计算器包含数字按钮、运算符按钮和一个显示屏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP JS Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <div id="display">0</div>
        <div class="buttons">
            <button class="btn" data-value="7">7</button>
            <button class="btn" data-value="8">8</button>
            <button class="btn" data-value="9">9</button>
            <button class="btn" data-value="/">/</button>
            <button class="btn" data-value="4">4</button>
            <button class="btn" data-value="5">5</button>
            <button class="btn" data-value="6">6</button>
            <button class="btn" data-value="*">*</button>
            <button class="btn" data-value="1">1</button>
            <button class="btn" data-value="2">2</button>
            <button class="btn" data-value="3">3</button>
            <button class="btn" data-value="-">-</button>
            <button class="btn" data-value="0">0</button>
            <button class="btn" data-value=".">.</button>
            <button class="btn" data-value="=">=</button>
            <button class="btn" data-value="+">+</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式

使用CSS样式美化计算器的界面，使其更加用户友好。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}
.calculator {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#display {
    background-color: #222;
    color: #fff;
    padding: 20px;
    font-size: 2em;
    text-align: right;
    border-bottom: 1px solid #ccc;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.btn {
    padding: 20px;
    font-size: 1.5em;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
}
.btn:hover {
    background-color: #e0e0e0;
}

二、前端逻辑处理

前端逻辑处理主要使用JavaScript来实现计算器的核心功能，如按钮点击事件、显示更新和计算结果等。

1. JavaScript功能实现

document.addEventListener('DOMContentLoaded', function () {
    const display = document.getElementById('display');
    const buttons = document.querySelectorAll('.btn');
    let currentInput = '';
    let operator = '';
    let operand1 = '';
    let operand2 = '';
    buttons.forEach(button => {
        button.addEventListener('click', function () {
            const value = button.getAttribute('data-value');
            if (!isNaN(value) || value === '.') {
                currentInput += value;
                display.innerText = currentInput;
            } else if (value === '=') {
                operand2 = currentInput;
                const result = calculate(operand1, operand2, operator);
                display.innerText = result;
                currentInput = result;
                operand1 = '';
                operand2 = '';
                operator = '';
            } else {
                if (operand1 === '') {
                    operand1 = currentInput;
                    operator = value;
                    currentInput = '';
                } else if (currentInput !== '') {
                    operand2 = currentInput;
                    const result = calculate(operand1, operand2, operator);
                    display.innerText = result;
                    operand1 = result;
                    operator = value;
                    currentInput = '';
                }
            }
        });
    });
    function calculate(op1, op2, operator) {
        switch (operator) {
            case '+':
                return parseFloat(op1) + parseFloat(op2);
            case '-':
                return parseFloat(op1) - parseFloat(op2);
            case '*':
                return parseFloat(op1) * parseFloat(op2);
            case '/':
                return parseFloat(op1) / parseFloat(op2);
            default:
                return 0;
        }
    }
});

三、后端支持

虽然计算器的主要逻辑可以在前端完成，但在某些情况下（如复杂计算或数据存储），我们可能需要后端支持。PHP可以用于处理这些后端逻辑。

1. PHP代码示例

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $operand1 = $_POST['operand1'];
    $operand2 = $_POST['operand2'];
    $operator = $_POST['operator'];
    $result = 0;
    switch ($operator) {
        case '+':
            $result = $operand1 + $operand2;
            break;
        case '-':
            $result = $operand1 - $operand2;
            break;
        case '*':
            $result = $operand1 * $operand2;
            break;
        case '/':
            if ($operand2 != 0) {
                $result = $operand1 / $operand2;
            } else {
                $result = 'Error';
            }
            break;
        default:
            $result = 'Error';
            break;
    }
    echo json_encode(array('result' => $result));
}
?>

2. 前端与PHP交互

使用AJAX与PHP进行交互，发送计算请求并接收结果。

function calculateWithPHP(op1, op2, operator) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'calculator.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            const response = JSON.parse(xhr.responseText);
            display.innerText = response.result;
            currentInput = response.result;
        }
    };
    xhr.send(`operand1=${op1}&operand2=${op2}&operator=${operator}`);
}
buttons.forEach(button => {
    button.addEventListener('click', function () {
        const value = button.getAttribute('data-value');
        if (!isNaN(value) || value === '.') {
            currentInput += value;
            display.innerText = currentInput;
        } else if (value === '=') {
            operand2 = currentInput;
            calculateWithPHP(operand1, operand2, operator);
            operand1 = '';
            operand2 = '';
            operator = '';
        } else {
            if (operand1 === '') {
                operand1 = currentInput;
                operator = value;
                currentInput = '';
            } else if (currentInput !== '') {
                operand2 = currentInput;
                calculateWithPHP(operand1, operand2, operator);
                operand1 = '';
                operand2 = '';
                operator = '';
            }
        }
    });
});

四、总结

通过结合使用HTML、CSS、JavaScript和PHP，我们可以构建一个功能齐全的计算器。前端的界面设计和逻辑处理确保了用户体验的友好性，而后端的PHP支持则为复杂计算和数据处理提供了可靠的后盾。通过这种方式，我们不仅提高了计算器的功能性，还增强了其可扩展性和维护性。