目录
一、题目:
题目描述:下列列表框中有+、-、*、/四种运算符,选择不同的运算符进行,单击计算按钮进行不同的计算。
二、基本界面设计代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
</head>
<body>
<?php
var_dump($_GET['sign']);
?>
<form action="">
<input type="text" name="num1" id="">
<select name="sign" id="">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="num2" id="">=
<input type="text" name="result" id="">
<input type="submit" value="计 算">
</form>
</body>
</html>
运行结果:
三、分析:
1、关键是怎么确定所选择符号,通过三目运算可以对确定符号,进行相应的运算。(其中需要注意的是除号,被除数(即分母)不能为0)
2、默认情况下,即使选择了其他计算符号,当单击计算按钮后,下拉列表框的符号还是会显示+号,如何解决。
3、当单击计算按钮后,num1和num2文本框的值不再显示,如何解决
四、实现编程三个步骤
1、输入(得到处理的原始数据) 如果原始数据在表单中,通过$_GET或$_POST来获取数据
2、对输入的数据进行处理
3、对处理的结果进行输出
五、完整实现代码
完整代码实现过程如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单计算器</title>
</head>
<body>
<?php
// 第一步:获取所输入的值和选择的运算符
$num1 = $_GET['num1']; //$_GET是提交表单以后才会有数据,第一次运行的时候,还没单击提交表单,$_GET['num1']没有值
$num2 = $_GET['num2'];
if($num1 == "" || $num2 == ""){
echo "<script>";
echo "alert('请输入要计算的值');";
echo "</script>";
}else{
$sign = $_GET['sign']; //获取所选择的符号 + - * /
$select1 = $select2 = $select3 = $select4 = ""; //先全部清空
// 第二步:使用三目运算符完成对运算符的4选一的判断
if($sign == "+"){
$result = $num1 + $num2;
$select1 = "selected";
}else if($sign == "-"){
$result = $num1 - $num2;
$select1 = "selected";
}else if($sign == "*"){
$result = $num1 * $num2;
$select1 = "selected";
}else {
if($num2 == 0){
$result = "除数不能为0";
}else{
$result = $num1 / $num2;
}
$select4 = "selected";
}
}
<!-- 输入数据的地方 -->
$form =<<<mark
<form>
<input type="number" name="num1" value="{$num1}">
<select name="sign" id="">
<option value="+" {$select1}>+</option>
<option value="-" {$select2}>-</option>
<option value="*" {$select3}>*</option>
<option value="/" {$select4}>/</option>
</select>
<input type="number" name="num2" value="{$num2}">=
<!-- 输出数据的地方 -->
<input type="text" name="result" value="{$result}" readonly>
<input type="submit" value="计算">
mark;
echo $form;
?>
</body>
</html>