计算器 - PHP (1) - 芒果文档

📌 相关文章

📜 计算器 - PHP (1)

📅 最后修改于: 2023-12-03 15:41:38.448000 🧑 作者: Mango

计算器 - PHP

简介

本文介绍使用 PHP 编写一个基本的计算器。我们将使用 HTML 和 PHP 编写一个表单和处理表单的 PHP 脚本。我们还将介绍如何使用 CSS 样式美化表单。

要求

了解基本的 HTML、PHP 和 CSS
了解基本的算术运算

步骤

创建 HTML 表单

首先，我们需要创建一个 HTML 表单，用于输入要计算的两个数和所需的操作。在表单中，我们将使用“input”元素。

<!DOCTYPE html>
<html>
<head>
  <title>计算器</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <form action="calculator.php" method="post">
    <label for="num1">第一个数字：</label>
    <input type="number" id="num1" name="num1" required><br>

    <label for="num2">第二个数字：</label>
    <input type="number" id="num2" name="num2" required><br>

    <label for="operator">操作：</label>
    <select id="operator" name="operator">
      <option value="add">加</option>
      <option value="subtract">减</option>
      <option value="multiply">乘</option>
      <option value="divide">除</option>
    </select><br><br>

    <input type="submit" value="计算">
  </form>
</body>
</html>

在这个表单中，我们有两个输入框和一个下拉菜单，用于选择要执行的操作。我们还添加了一个提交按钮，并将表单的“action”属性设置为“calculator.php”。

创建 PHP 脚本

现在我们需要创建一个 PHP 脚本来处理表单。我们将对表单数据进行验证，计算结果并将结果显示回用户。

<!DOCTYPE html>
<html>
<head>
  <title>计算器</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <?php
    if (isset($_POST['num1']) && isset($_POST['num2']) && isset($_POST['operator'])) {
      $num1 = $_POST['num1'];
      $num2 = $_POST['num2'];
      $operator = $_POST['operator'];
      $result = 0;

      switch ($operator) {
        case 'add':
          $result = $num1 + $num2;
          break;
        case 'subtract':
          $result = $num1 - $num2;
          break;
        case 'multiply':
          $result = $num1 * $num2;
          break;
        case 'divide':
          if ($num2 != 0) {
            $result = $num1 / $num2;
          } else {
            echo "<p>除数不能为零！</p>";
            exit();
          }
          break;
        default:
          echo "<p>无效的操作！</p>";
          exit();
      }

      echo "<h2>结果</h2>";
      echo "<p>{$num1} {$operator} {$num2} = {$result}</p>";
    }
  ?>
  <form action="calculator.php" method="post">
    <label for="num1">第一个数字：</label>
    <input type="number" id="num1" name="num1" required><br>

    <label for="num2">第二个数字：</label>
    <input type="number" id="num2" name="num2" required><br>

    <label for="operator">操作：</label>
    <select id="operator" name="operator">
      <option value="add">加</option>
      <option value="subtract">减</option>
      <option value="multiply">乘</option>
      <option value="divide">除</option>
    </select><br><br>

    <input type="submit" value="计算">
  </form>
</body>
</html>

在这个 PHP 脚本中，我们使用“isset”函数来检查表单数据是否提交。如果是，我们将表单数据存储在变量中，并使用“switch”语句执行所选的操作。我们还对除数为零的情况进行了检查。

最后，我们将结果显示在 HTML 页面上。如果有错误，我们将显示错误消息。否则，我们将显示结果。

创建 CSS 样式

为了使我们的计算器看起来好看一点，我们需要添加一些 CSS 样式。在这里，我们将创建一个基本样式，为表单添加一个背景颜色和一些间距。

body {
  background-color: #fafafa;
  font-family: sans-serif;
}

form {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  width: 400px;
  margin: 0 auto;
}

label, select, input[type="submit"] {
  display: block;
  margin-bottom: 10px;
}

input[type="submit"] {
  margin-top: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #0069d9;
}

总结

在本文中，我们学习了如何使用 HTML、PHP 和 CSS 编写一个基本的计算器。我们创建了一个包含两个输入框和一个下拉菜单的 HTML 表单，并使用 PHP 脚本处理表单数据和计算结果。最后，我们添加了一些 CSS 样式使其更美观。