PHP简易计算器

实现思路：
1.运用JS处理页面操作逻辑、收集必要的计算参数；
2.将参数传给PHP后端处理并返回结果；
3.将结果展示到前端页面。

PHP代码

<?php
  @$n1 = $_GET["n1"];
  @$n2 = $_GET["n2"];
  @$f = $_GET["fu"];
  //计算函数
  function calc($n_1,$n_2,$fu){
    if(empty($n_1) || empty($n_2) || empty($fu)){
      return "";   
    }else{
        $r = 0;
        switch ($fu) {
            case 'and':
                $r = $n_1 + $n_2;
                break;
            case 'minus':
                $r = $n_1 - $n_2;
                break;
            case 'times':
                $r = $n_1 * $n_2;
                break;
            case 'into':
                $r = $n_1 / $n_2;
                break;
            default:
                $r = 0;
                break;
        }
        return $r;
    }
  }
?>

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>计算器（PHP版）</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>.row{padding:12px;}</style>
</head>
<body style="background:#313131;color:#9b9b9b;">
    <div class="container clear" style="padding-top:20px; padding-bottom:20px;">
        <div class="row">
            <div class="col-12">计算器（PHP版）</div>
        </div>
        <div class="row">
            <div class="col-12"><input type="text" id="input" value="<?= calc($n1,$n2,$f) ?>" class="form-control" style="text-align:right;"></div>
        </div>
        <div class="row">
            <div class="col-3"><button onclick="getBtn(7)" type="button" class="btn btn-lg btn-block btn-secondary">7</button></div>
            <div class="col-3"><button onclick="getBtn(8)" type="button" class="btn btn-lg btn-block btn-secondary">8</button></div>
            <div class="col-3"><button onclick="getBtn(9)" type="button" class="btn btn-lg btn-block btn-secondary">9</button></div>
            <div class="col-3"><button onclick="getBtn('+')" type="button" class="btn btn-lg btn-block btn-danger">+</button></div>
        </div>
        <div class="row">
            <div class="col-3"><button onclick="getBtn(4)" type="button" class="btn btn-lg btn-block btn-secondary">4</button></div>
            <div class="col-3"><button onclick="getBtn(5)" type="button" class="btn btn-lg btn-block btn-secondary">5</button></div>
            <div class="col-3"><button onclick="getBtn(6)" type="button" class="btn btn-lg btn-block btn-secondary">6</button></div>
            <div class="col-3"><button onclick="getBtn('-')" type="button" class="btn btn-lg btn-block btn-warning">-</button></div>
        </div>
        <div class="row">
            <div class="col-3"><button onclick="getBtn(1)" type="button" class="btn btn-lg btn-block btn-secondary">1</button></div>
            <div class="col-3"><button onclick="getBtn(2)" type="button" class="btn btn-lg btn-block btn-secondary">2</button></div>
            <div class="col-3"><button onclick="getBtn(3)" type="button" class="btn btn-lg btn-block btn-secondary">3</button></div>
            <div class="col-3"><button onclick="getBtn('*')" type="button" class="btn btn-lg btn-block btn-info">×</button></div>
        </div>
        <div class="row">
            <div class="col-3"><button onclick="getBtn('.')" type="button" class="btn btn-lg btn-block btn-secondary">.</button></div>
            <div class="col-3"><button onclick="getBtn(0)" type="button" class="btn btn-lg btn-block btn-secondary">0</button></div>
            <div class="col-3"><button onclick="getBtn('=')" type="button" class="btn btn-lg btn-block btn-success">=</button></div>
            <div class="col-3"><button onclick="getBtn('/')" type="button" class="btn btn-lg btn-block btn-primary">÷</button></div>
        </div>
        <div style="text-align:center;margin-top:20px;color:#9b9b9b;font-size:12px;">©2021 CopyRight PHP中文网</div>
    </div>
</body>
</html>

JS代码

<script>
var n1 = "";//第一个数
var n2 = "";//第二个数
var n3 = "";//当前数
var v3 = "";//计算结果
var fu = "";//运算符号
var bl = false;
var view = $("#input"); //显示屏
var view_val = "";
//按钮事件
function getBtn(v){
    //检查v是否为符号
    if ((typeof v=='number')&&v.constructor==Number|| v == ".") {
        //拼接数字字符串
        n3 += v.toString().concat();
        //赋值给第二个数
        if (bl){n2 = n3;}
    } else {
        if (v == "=") {
            if (n1 != "" && n2 !="") {
                //运算符号赋值;
                var ff;
                switch (fu) {
                    case '+':
                        ff = "and";
                        break;
                    case '-':
                        ff = "minus";
                        break;
                    case '*':
                        ff = "times";
                        break;
                    case '/':
                        ff = "into";
                        break;
                    default:
                        alert("错误!");
                        location.reload();
                        break;
                }
                window.location.href="calc.php?n1="+n1+"&n2="+n2+"&fu="+ff+"";
            }else{
                alert("输入错误!");
                location.reload();
            }
        }else{
            fu = v;
            //赋值给第一个数
            if (n1=="") {
                n1 = n3;
                n3 = "";
                bl = true;
            }
        }
    }
    //输出显示屏;
    if (v != '=') {
        view_val+=v;
        view.val(view_val);
    }
}
</script>

效果展示

取偶函数练习

<?php
  $arr = [23,3,45,6,78,8,34,5,6,48];
  //调用取偶函数
  print_r(getOdd($arr));
  //取偶函数
  function getOdd(array $a):array
  {
    $arr2=[];
    foreach ($a as $v) {
      if($v % 2 == 0){
        //将筛选的偶数赋值给新的数组
        array_push($arr2,$v);
      }
    }
    return $arr2;
  }
?>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

第一课学习准备

2021-07-23 20:28:13