搜 索

使用php或js代码实现简单的在线计算器功能

编辑:QTOOL.NET日期:2019-02-27283

本文简单介绍了怎样使用一些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" />   
js计算器运行效果图
我们可以在第一个文本框中输入第一个数字,选择运算符号,然后继续在第二个文本框中输入第二个数字,点击计算或等号按钮,即可在下方显示数字运算结果.

TAG标签:jsphp
此文章由QTOOL.NET编辑
最新文章

热门标签