【PHP】4 條件控制&迴圈-4.5.1製作計算機

*PHP  4 條件控制&迴圈
➤4.5.1 實戰練習-製作計算機

計算機_範例1.(透過if..elseif條件判斷製作)
#需要2個欄位、1個下拉清單來輸入值和1顆按鈕計算傳送、1顆按鈕重算。
#要算小數點但無法傳值，該怎辦?A:欄位內使用step="0.001"即可(越多小數點就繼續在小數點後增加0)。
#method行為可以用GET或POST，GET會秀出在網址列，POST不會。
#透過$_GET[]或是$_POST[]取值存至變數裡。
#使用條件判斷來做加減乘除，並秀出於本頁(form標籤的action指定本頁)。
#PHP7若有出現Warning訊息，使用ini_set()函式，將display_errors關掉。這邊因為是有用小數點所以不用intval()轉換類型，否則會造成小數點無法出現。

<div class="box1">
      <h3 class="topic">用if做的計算機</h3><hr>
        <div class="box1_content">
        <form action="index.php" method="post">
          <!--這裡放上step="0.001"是讓欄位可輸入小數點-->
          數值1: <input type="number" step="0.001" name="num1" required>
          <select name="calculator">
          　<option value="+">+</option>
          　<option value="-">-</option>
          　<option value="*">x</option>
          　<option value="/">÷</option>
          </select>
          <br>
          數值2: <input type="number" step="0.001" name="num2" required><br>
          <input type="submit" value="計算" style="margin-left: 20%">
          <input type="reset" value="重算">
        </form>
        </div>
      <div class="box2">
        <h3 class="topic">結果</h3><hr>
          <div class="box2_content">
            <?php
              //透過ini_set()隱藏警告訊息，或是改php.ini也可以
              ini_set('display_errors', 'off');
              $n1 = $_POST["num1"];
              $n2 = $_POST["num2"];
              $calc = $_POST["calculator"];
              if($calc == "+"){
                echo $n1 + $n2;
              } elseif ($calc == "-") {
                echo $n1 - $n2;
              } elseif ($calc == "*") {
                echo $n1 * $n2;
              } elseif ($calc == "/") {
                echo $n1 / $n2;
              } else {
                echo "";
              }
            ?>
          </div>
      </div>
    </div>

計算機_範例2.(透過switch條件判斷製作(效果和上面相同))

<div class="box1">
      <h3 class="topic">用switch做的計算機</h3><hr>
        <div class="box1_content">
        <form action="index2.php" method="post">
          <!--這裡放上step="0.001"是讓欄位可輸入小數點-->
          數值1: <input type="number" step="0.001" name="num1" required>
          <select name="calculator">
          　<option value="+">+</option>
          　<option value="-">-</option>
          　<option value="*">x</option>
          　<option value="/">÷</option>
          </select>
          <br>
          數值2: <input type="number" step="0.001" name="num2" required><br>
          <input type="submit" value="計算" style="margin-left: 20%">
          <input type="reset" value="重算">
        </form>
        </div>
      <div class="box2">
        <h3 class="topic">結果</h3><hr>
          <div class="box2_content">
            <?php
              //透過ini_set()隱藏警告訊息，或是改php.ini也可以
              ini_set('display_errors', 'off');
              $n1 = $_POST["num1"];
              $n2 = $_POST["num2"];
              $calc = $_POST["calculator"];
              switch ($calc) {
                case '+':
                  echo $n1 + $n2;
                  break;
                case '-':
                  echo $n1 - $n2;
                  break;
                case '*':
                  echo $n1 * $n2;
                  break;
                case '/':
                  echo $n1 / $n2;
                  break;
                default:
                  echo "";
                  break;
              }
            ?>
          </div>
      </div>
    </div>

上面範例共用的CSS(可以自己改寫)

<style>
      body{ font-family: "微軟正黑體"; }
      .topic {
        margin: 0px auto;
        text-align: center;
      }
      .box1 {
        width: 600px;
        height: 250px;
        top: 50%;
        left: 50%;
        position: absolute; /*絕對位置*/
        margin: -400px 0 0 -300px; /*外距:上右下左(往上往左回推)*/
        border: 2px solid green;
        border-radius: 5px;
      }
      .box1_content{
        font-size: 14pt;
        margin-left: 160px;
      }
      .box2 {
        width: 500px;
        height: 100px;
        top: 50%;
        left: 50%;
        position: absolute; /*絕對位置*/
        margin: -5px 0 0 -250px; /*外距:上右下左(往上往左回推)*/
        border: 2px solid red;
        border-radius: 5px;
      }
      .box2_content{
        color: red;
        font-size: 20pt;
        margin-top: 10px;
        text-align: center;
      }
</style>