php 实现一个简单的计算器功能 -

首页 > 博客列表 > php 实现一个简单的计算器功能

博主信息

博文 9

粉丝 0

访问量 11929

专题推荐

更多>

一，需要用到的 php 基础知识点

php 运算符

条件分支控制

二，简单实现

实现思路

前端界面是一个form表单，两个输入框允许用户输入要运算的数值，一个下拉列表允许用户选择运算方式，比如+、-、×、÷等算数运算符。用ajax异步请求的方式把需要运算的数值和运算符传递给php脚本，php脚本根据前端所传递过来数据进行判断、运算，然后把结果返回给浏览器，浏览器把结果渲染到窗口。

代码

html代码

<form action="http://php.std/1119/1.php" method="post" onsubmit="return false;">
  <label for="num1"></label>
  <input type="text" name="num1" id="num1" value="" />
  <select name="operator" id="operator">
    <option value="0">+</option>
    <option value="1">-</option>
    <option value="2">×</option>
    <option value="3">÷</option>
  </select>
  <label for="num2"></label>
  <input type="text" name="num2" id="num2" value="" />
  <button>=</button>
  <span id="result" style="color: rebeccapurple; padding-left: 1em"></span>
</form>

js代码

//获取按钮
let btn = document.getElementsByTagName("button")[0];
//获取表单
let form = document.getElementsByTagName("form")[0];
//服务器地址
let url = "http://php.std/1119/calculator.php";
// ajax初始化
const handle = new XMLHttpRequest();
//   点击计算
btn.addEventListener("click", () => {
  //   构造ajax请求数据
  // 第一个数
  let num1 = document.querySelector("#num1").value;
  console.log(num1);
  // 第二个数
  let num2 = document.querySelector("#num2").value;
  console.log(num2);
  // 操作符（0->+,1->-,2->x,3->÷）
  let opt = document.querySelector("#operator").value;
  console.log(opt);
  // 构造请求对象
  const data = {
    num1,
    num2,
    opt,
  };
  // 转为json;
  const dataToJson = JSON.stringify(data);
  console.log(dataToJson);
  // ajax请求
  handle.addEventListener("readystatechange", show, false);
  handle.open("POST", url, true);
  // 设置请求头（post必须设置）
  handle.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  handle.send(dataToJson);
});
//   结果渲染
function show() {
  // 返回结果赋值变量
  let ret = handle.response;
  // 渲染
  document.querySelector("#result").innerHTML = ret;
}

php代码

<?php
error_reporting(0);
// 接受参数
$post = json_decode(key($_POST),true);
// 第一个数
$num1 = isset($post['num1'])?$post['num1']:0;
// 第二个数
$num2 = isset($post['num2'])?$post['num2']:0;
// 运算符代号（0->+,1->-,2->x,3->÷）
$opt = isset($post['opt'])?(int)$post['opt']:0;
// 验证数据合法性
if(!verify($num1,$num2,\$opt)) {
echo '非法数据，你已经被我们标记！';
die;
}
// 计算
switch($opt){
  case 0:
      // 加 +
      echo $num1+$num2;
  break;
  case 1:
      // 减 -
      echo $num1-$num2;
  break;
  case 2:
      // 乘 *
      echo $num1\*$num2;
  break;
  case 3:
      // 除 /
      echo $num1/\$num2;
break;
}
// 定义数据合法性函数
function verify($num1,$num2,$opt)
{
  $opt_allow = [0,1,2,3];
//验证
if(!is_numeric($num1)||!is_numeric($num2)) {
return false;
}else{
return in_array($opt,$opt_allow) && true;
}
}