在线演示:https://tool.zmki.cn/m/xuexi/jisuanqi.php

PHP form表单计算器 For html美化-钻芒博客
<html>
	<head>
		<meta charset="UTF-8">
	<style>
#zm{
				margin:0 auto; /*块居中*/
				height:200px;/*块高*/
				width:500px;/*块宽*/
				box-shadow:0 10px 50px 5px rgba(9,99,25,.88);/*设置阴影*/
				margin-top:100px;/*顶部边距*/
				border-radius:10px;/*块圆角值*/
				}
#img{
				float: left;		/*居左显示*/
				width: 110px;		/*图片宽*/
				margin-top: 20px;	/*img距离盒子顶部边距*/
				margin-left: 30px;	/*img距离盒子左侧边距*/
				}
#p 	{
				margin-left: 160px;/*文字距离盒子左侧的距离*/
				line-height:30px/*行距*/
				
				}
#zm2{
				margin-top: 20px;
				margin-left: 20px;/*文字距离盒子左侧的距离*/
				font-size:14px;/*字号*/
				line-height:1.5;/*行距*/
				color:#919191/*文字颜色*/;
				}
				.color{
				border-radius:10px;/*块圆角值*/
				box-shadow:0 5px 34px 1px rgba(9,9,88,22);/*设置阴影*/
				color: white;
				background-color:  cadetblue;
				}
				.color2{
				border-radius:10px;/*块圆角值*/
				margin-left: 20px;/*文字距离盒子左侧的距离*/
				box-shadow:0 5px 34px 1px rgba(9,9,88,22);/*设置阴影*/
				color: white;
				background-color:  cadetblue;
				}
				#scjg{
				margin-left: 1px;/*文字距离盒子左侧的距离*/
				line-height:30px;/*行距*/
				color:blue;
				}
				#red{color: red;}
				.bdbg{
				border-radius:10px;/*块圆角值*/
				box-shadow:0 5px 34px 1px rgba(9,9,88,22);/*设置阴影*/
				color: white;
				background-color:darkslategrey;
				}
		</style>
	</head>
<body>
	<div id="zm">
		<div id="zm2">
			<p id="p">
				<a align="center">Form表单计算器V1.0</a>
				<br>
					<form method="get">
						<input  class="bdbg"  type="text" name="zm1">
							<select  class="bdbg"  name="fuhao">
							<option>+</option>
							<option>-</option>
							<option>*</option>
							<option>/</option>
							</select>
						<input  class="bdbg"  type="text" name="zm2">
							
						<input    class="color2" type="submit" value="计算">
					</form>
	</p>
<?php
		
		if (isset($_post['zm1']) && isset ($_POST['zm2'])){
		$zm1 = $_POST['zm1'];
		$zm2 = $_POST['zm2'];
		$fuhao = $_POST['fuhao'];
		
		var_dump($_POST);
			echo '<br>';
			switch($fuhao){
			case '+' : echo $zm1.'+'.$zm2. '=' ,$zm1+$zm2;break;
			case '-' : echo $zm1.'-'.$zm2. '=' ,$zm1-$zm2;break;
			case '*' : echo $zm1.'*'.$zm2. '=' ,$zm1*$zm2;break;
			case '/' : echo $zm1.'/'.$zm2. '=' ,$zm1/$zm2;break;
			default : echo '非法运算符'; break; 
			}
		}
			echo '<b><a id="scjg">计算结果:</a></b>';
			if (isset($_GET['zm1']) && isset ($_GET['zm2'])){
		$zm1 = $_GET['zm1'];
		$zm2 = $_GET['zm2'];
		$fuhao = $_GET['fuhao'];
//		echo '<br>';
//		var_dump($_GET);
		echo '<br>';echo '<p></p>';
			switch($fuhao){
			case '+' : echo $zm1.'+'.$zm2. '=' ,$zm1+$zm2;break;
			case '-' : echo $zm1.'-'.$zm2. '=' ,$zm1-$zm2;break;
			case '*' : echo $zm1.'*'.$zm2. '=' ,$zm1*$zm2;break;
			case '/' : echo $zm1.'/'.$zm2. '=' ,$zm1/$zm2;break;
//			优化:	判断空值输出提示,但我还不会判断。
			default : echo '非法运算符'; break; 
			}
		}
			
?>
		
		</div></div>
		
		
		
	</body>
</html>