5.7 实操：简单计算器

本实操将使用 PHP 运算符创建一个简单的计算器，实现基本的算术运算功能。

功能需求

实现加、减、乘、除四则运算
输入两个数字和运算符
显示计算结果
处理除数为零的情况

实现代码

php

<?php
// 简单计算器
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取输入值
    $num1 = isset($_POST['num1']) ? $_POST['num1'] : '';
    $num2 = isset($_POST['num2']) ? $_POST['num2'] : '';
    $operator = isset($_POST['operator']) ? $_POST['operator'] : '';
    $result = '';
    
    // 验证输入
    if (is_numeric($num1) && is_numeric($num2)) {
        $num1 = floatval($num1);
        $num2 = floatval($num2);
        
        // 根据运算符计算结果
        switch ($operator) {
            case '+':
                $result = $num1 + $num2;
                break;
            case '-':
                $result = $num1 - $num2;
                break;
            case '*':
                $result = $num1 * $num2;
                break;
            case '/':
                if ($num2 != 0) {
                    $result = $num1 / $num2;
                } else {
                    $result = '错误：除数不能为零';
                }
                break;
            default:
                $result = '错误：请选择正确的运算符';
        }
    } else {
        $result = '错误：请输入有效的数字';
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>简单计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .calculator {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        select {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 4px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>简单计算器</h1>
        <form method="post" action="">
            <input type="text" name="num1" placeholder="请输入第一个数字" value="<?php echo isset($num1) ? $num1 : ''; ?>"><br>
            <select name="operator">
                <option value="+" <?php echo isset($operator) && $operator == '+' ? 'selected' : ''; ?>>+</option>
                <option value="-" <?php echo isset($operator) && $operator == '-' ? 'selected' : ''; ?>>-</option>
                <option value="*" <?php echo isset($operator) && $operator == '*' ? 'selected' : ''; ?>>*</option>
                <option value="/" <?php echo isset($operator) && $operator == '/' ? 'selected' : ''; ?>>/</option>
            </select><br>
            <input type="text" name="num2" placeholder="请输入第二个数字" value="<?php echo isset($num2) ? $num2 : ''; ?>"><br>
            <input type="submit" value="计算">
        </form>
        <?php if (isset($result)): ?>
            <div class="result">
                结果：<?php echo $result; ?>
            </div>
        <?php endif; ?>
    </div>
</body>
</html>

代码解析

使用 $_POST 获取表单提交的数值和运算符
验证输入是否为有效的数字
使用 switch 语句根据运算符执行相应的计算
处理除数为零的特殊情况
使用 HTML 和 CSS 美化界面

运行结果

当用户输入两个数字和选择运算符后，点击"计算"按钮，页面会显示计算结果。

扩展练习

添加更多运算类型，如取模运算
实现连续计算功能
添加历史记录功能
优化界面设计

5.7 实操：简单计算器 ​

功能需求 ​

实现代码 ​

代码解析 ​

运行结果 ​

扩展练习 ​

5.7 实操：简单计算器

功能需求

实现代码

代码解析

运行结果

扩展练习