本文简单介绍了怎样使用一些php代码与js代码制作一款简洁小巧的
在线工具。
首先新建一个XXX.php的文件，然后输入以下html代码.
<form action="/xxx.php" method="post">
<input type="text" size="13" name="jssz1" value="<?php if(!empty($jssz1)){echo $jssz1;}?>" />
<select name="dxan">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" size="13" name="jssz2" value="<?php if(!empty($jssz2)){echo $jssz2;}?>" />
<input type="anniumit" name="anniu" value="计算" />
</form>
然后继续输入以下php代码
<?php
//判断用户是否点击了按钮提交了两个数字的表单
if(isset($_POST["jssz1"]) && isset($_POST["jssz2"])){
if(empty($_POST["jssz1"])){
//判断输入提交的第一个数字是否为空，为空则输出
echo "第一个数字不允许为空白";
unset($_POST["anniu"]);//销毁post提交的内容，后面计算将不执行
}
if(empty($_POST["jssz2"])){
//判断输入提交的第二个数字是否为空，为空则输出
echo "第二个数字不允许为空白";
unset($_POST["anniu"]);}
$dxan=$_POST["dxan"];
//判断加减乘除类别
$jssz1=$_POST["jssz1"];
//获取第一个数
$jssz2=$_POST["jssz2"];
//获取第二个数
if($dxan == "/"){
if($jssz2 == 0){
echo "除数不能为0";
unset($_POST["anniu"]);
}
}
}
//通过$_POST["anniu]，判断是否点击了计算按钮
if(isset($_POST["anniu"]) && !empty($_POST["anniu"])){
//通过判断提交的符号选择来执行那种运算
switch($dxan){
case "+"://如果为加号
$jjjg = $jssz1+$jssz2;
break;
case "-"://如果为减号
$jjjg = $jssz1-$jssz2;
break;
case "*"://如果为乘号
$jjjg = $jssz1*$jssz2;
break;
case "/"://如果为除号
$jjjg = $jssz1/$jssz2;
break;
}
echo "<input type=\"text\" id=\"jjjg\" value=".$jjjg." />";//第三个文本框中输出计算结果
}
?>
在完成输入以上代码内容后，我们保存为XXX.php，然后放在本地服务器的网站根目录下输入localhost/xxx.php即可测试运行这一款在线计算器
那么我们该怎样使用js实现简单的小计算器功能呢？
新建一个XXX.html文件在body中输入以下代码
<script type="text/javascript">
function jsjg(){
var a = document.getElementById("num1").value;//a获取第一个输入框的数字
var b = document.getElementById("num2").value;//获取第二个输入框的数字
var c = document.getElementById("xk").value;//获取选择框符号
a = parseFloat(a);//字符串返回数字
b = parseFloat(b);//字符串返回数字
switch(c){ //判断选框符号来执行相关数字运算，获得运算结果
case "+":
document.getElementById("jjjg").value=parseInt(a)+parseInt(b);
break;
case "-":
document.getElementById("jjjg").value=parseInt(a)-parseInt(b);
break;
case "*":
ocument.getElementById("jjjg").value=parseInt(a)*parseInt(b);
break;
case "/":
document.getElementById("jjjg").value=parseInt(a)/parseInt(b);
break;
}
}
</script>
<input type="text" id="num1" />
<select id='xk'>
<option value="+">+</option>
<option value="-" c>-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2" />
<input type="button" value=" = " onclick ="jsjg()"/>
<input type="text" id="jjjg" />
我们可以在第一个文本框中输入第一个数字，选择运算符号，然后继续在第二个文本框中输入第二个数字，点击计算或等号按钮，即可在下方显示数字运算结果.
tool在线工具