🧮 题目要求
设计一个网页,让用户输人一个运算式,采用下拉列表提供“加、减、乘、除、模（%）”至少4种运算符。当用户单击“求值”按钮时,自动计算结果并显示出提示信息（可以是弹框显示结果，也可以是在浏览器的页面显示结果，有时间的同学把程序UI界面设计一些样式效果，做漂亮一点）。
实训目的：
1.掌握各种流程控制语句的综合应用；
2.熟练掌握PHP自定义函数的灵活运用方法。
效果图如下所示
🧮 html代码
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Document</title></head><body><divclass="box1"><h1>简易计算器</h1><fieldset><legend>操作面板</legend><formaction=""method="post"id="form1"name="form1"><p>输入数据</p><p><inputtype="text"id="num1"name="num1"placeholder="请输入第一个数"></p><p><inputtype="text"id="num2"name="num2"placeholder="请输入第二个数"></p><p>选择运算符</p><p><selectname="s1"id="s1"><optionvalue="+">+</option><optionvalue="-">-</option><optionvalue="*">*</option><optionvalue="/">/</option><optionvalue="%"selected="selected">%</option></select></p><p><inputtype="submit"id="send"name="send"value="点击计算"style="margin-right: 20px;"><inputtype="reset"id="clean"name="clean"value="清空数字"></p></form><divclass="anwser"><fieldsetstyle="height: 170px;"><legend>计算结果:</legend></fieldset></div></fieldset><divclass="box2"><divclass="box_bottom"style="color:#b2b0b0;font-weight: bolder;font-family: Courier New">© <spanstyle="letter-spacing: 1.5px;font-size: 1.6rem;;">2022 GHW・WebSite</span></div></div></div></body></html>
🧮 css代码
body { background: #000; color: #fff; } .box1 { position: relative; width: 31.25rem; height:28rem; border: 0.425remdouble#ccc; margin: 0auto; top: 6.25rem; box-shadow: 0.625rem0.625rem1.25rem0.3125remrgb(93, 93, 93); padding: 20px; } h1 { text-align: center; color: #fff; } input:hover { background-color: #000; color: #fff; border:1pxsolid#fff; transition: .8s; } .box2 { margin: 0auto; width: 300px; height: 50px; /* border: 1px solid #fff; */margin-top: 40px; } .anwser { position: absolute; width: 200px; height: 200px; border: 1pxsolid#fff; top: 150px; left: 280px; padding: 5px; }
🧮 php代码
@$num1=$_POST["num1"]; @$num2=$_POST["num2"]; if (isset($num1) &&isset($num2)) { if (empty($num1)) { // echo "<script>alert('第一个数不能为空')</script>";echo"第一个数不能为空<br>"; } if (empty($num2)) { // echo "<script>alert('第二个数不能为空')</script>";echo"第二个数不能为空<br>"; } if (!is_numeric($num1)) { // echo "<script>alert('第一个空请输入有效数字')</script>";echo"第一个空请输入有效数字<br>"; } if (!is_numeric($num2)) { // echo "<script>alert('第二个空请输入有效数字')</script>";echo"第二个空请输入有效数字<br>"; } if (isset($_POST["send"]) &&!empty($_POST["send"])) { $s1=$_POST["s1"]; functionf1($num1, $num2, $s1) { if (is_numeric($num1) &&is_numeric($num2)) { $jg=0; $s1=$_POST["s1"]; $str=""; for ($i=0; $i<5; $i++) {@$str. =$s1[$i]; } if ($str=='+') { $jg=$num1+$num2; } elseif ($str=='-') { $jg=$num1-$num2; } elseif ($str=='*') { $jg=$num1*$num2; } elseif ($str=='/') { if ($num2==0) { // echo "<script>alert('0不能作为除数使用')</script>";echo"0不能作为除数使用<br>"; }@$jg=$num1/$num2; } echo"{$num1}{$str}{$num2}={$jg}"; } } f1($num1, $num2, $s1); } }
🧮 完整代码
<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Document</title><style>body { background: #000; color: #fff; } .box1 { position: relative; width: 31.25rem; height:28rem; border: 0.425remdouble#ccc; margin: 0auto; top: 6.25rem; box-shadow: 0.625rem0.625rem1.25rem0.3125remrgb(93, 93, 93); padding: 20px; } h1 { text-align: center; color: #fff; } input:hover { background-color: #000; color: #fff; border:1pxsolid#fff; transition: .8s; } .box2 { margin: 0auto; width: 300px; height: 50px; /* border: 1px solid #fff; */margin-top: 40px; } .anwser { position: absolute; width: 200px; height: 200px; border: 1pxsolid#fff; top: 150px; left: 280px; padding: 5px; } </style></head><body><divclass="box1"><h1>简易计算器</h1><fieldset><legend>操作面板</legend><formaction=""method="post"id="form1"name="form1"><p>输入数据</p><p><inputtype="text"id="num1"name="num1"placeholder="请输入第一个数"></p><p><inputtype="text"id="num2"name="num2"placeholder="请输入第二个数"></p><p>选择运算符</p><p><selectname="s1"id="s1"><optionvalue="+">+</option><optionvalue="-">-</option><optionvalue="*">*</option><optionvalue="/">/</option><optionvalue="%"selected="selected">%</option></select></p><p><inputtype="submit"id="send"name="send"value="点击计算"style="margin-right: 20px;"><inputtype="reset"id="clean"name="clean"value="清空数字"></p></form><divclass="anwser"><fieldsetstyle="height: 170px;"><legend>计算结果:</legend></fieldset></div></fieldset><divclass="box2"><divclass="box_bottom"style="color:#b2b0b0;font-weight: bolder;font-family: Courier New">© <spanstyle="letter-spacing: 1.5px;font-size: 1.6rem;;">2022 GHW・WebSite</span></div></div></div></body></html>
🧮 实现效果
