自己用html、js、ajax、php制作的简单网页版计算器。

最新推荐文章于 2023-04-14 08:00:00 发布

leedaning

最新推荐文章于 2023-04-14 08:00:00 发布

阅读量1.9k

点赞数

分类专栏： js 文章标签： ajax javascript php url json

本文链接：https://blog.csdn.net/leedaning/article/details/38037499

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

最近想找些简单的例子练练手，就准备仿照window自带的计算器简单做一个。简单说下自己做的时候的想法以及碰到的一些问题（完整的代码在文章末尾）：

首先，计算器输入分为两部分，页面上的按钮输入以及在显示的文本框里用键盘输入；其次，是对不同输入状态下的完整数字（不是单个数字，而是多位的情况）和运算符之间的划分；接下来就是，对页面输入的表达式像后台处理的传递（表达式中的‘+’号传过去为空）。

第一个问题：

如果用页面的数字按钮输入比较好办，用function operate(id)函数。然而，如果是从输入框中得到就比较麻烦，首先要用function inpNum()捕获键盘输入事件，然后把相应的键码值（应该是ASCII码，这个在我上篇文章中有介绍，不清楚的可以看下）转换为键值（真正的数字值）。

第二个问题：

因为计算不可能只进行个位数的计算还涉及到多位数的运算，所以输入的时候就要判断数字输入是否完成，什么时候输入的数字才是完成了输入。这个我不清楚别人是怎么做的，按照自己想的就是根据运算符号来界定了，当输入运算符号的时候说明输入框中的数字已经是完整的了，然后保存起来。（这只是我自己的想法，如果哪位有其他的方法还请不吝赐教）

第三个问题：本来以为从显示页面传递到后台很简单，后来实际操作的时候才发现如果进行“加法”运算的时候“+”好传过去的是空，又不敢在后台贸然把所有空格都转为“+”。试过对传递的url先进行urlencode编码，但是始终觉得的不妥。最后想到在前台把运算表达式中的每个元素（我说的是数字和运算符，如：23+6*3中的“23”、“+”、“6”、“*”、“3”都是元素）按顺序存到数组中去，然后以json格式传递给后台进行处理。

以上我把自己做的过程中遇到的自认为比较重要的问题说了下，有很多问题可能没说到，有哪里说的不对或者不到位的话，欢迎各位朋友多多指正，也希望能够与大家多多交流分享程序的乐趣！

显示页面（index.php）：

<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<style type="text/css">
input{width:22px;height:22px;}
</style>

<script>
function require(){
varArr[index] = num ;//最后输入的数字放到数组中去
jsonVar = JSON.stringify(varArr);//把数组转换为json格式

// alert("jsonVar:"+jsonVar);
//用ajax进行后台计算，返回计算结果
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("show").value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","calculator.php?jsonVar="+jsonVar,true);
xmlhttp.send();
}//end func require()
function onRemove(){
var shobj = document.getElementById('show');
//点击默认状态下的输入框是把输入框清空
if(shobj.value=='0'){
shobj.value = "";
}//end if()
}//end func onRemove()

//用来捕获输入事件
function inpNum(){
var objOpe = document.getElementById("show");
//var e = e || window.event;
//keyCode = e.keyCode || e.which || e.charCode;
var currKey=event.keyCode;

switch(currKey){
case 43:
values = '+';
type = 1;
break;
case 45:
values = '-';
type = 1;
break;
case 42:
values = '*';
type = 1;
break;
case 47:
values = '/';
type = 1;
break;
case 48:
values = 0;
type = 0;
break;
case 49:
values = 1;
type = 0;
break;
case 50:
values = 2;
type = 0;
break;
case 51:
values = 3;
type = 0;
case 52:
values = 4;
type = 0;
break;
case 53:
values = 5;
type = 0;
break;
case 54:
values = 6;
type = 0;
break;
case 55:
values = 7;
type = 0;
break;
case 56:
values = 8;
type = 0;
break;
case 57:
values = 9;
type = 0;
break;
case 96:
values = 0;
type = 0;
break;
case 97:
values = 1;
type = 0;
break;
case 98:
values = 2;
type = 0;
break;
case 99:
values = 3;
type = 0;
case 100:
values = 4;
type = 0;
break;
case 101:
values = 5;
type = 0;
break;
case 102:
values = 6;
type = 0;
break;
case 103:
values = 7;
type = 0;
break;
case 104:
values = 8;
type = 0;
break;
case 105:
values = 9;
type = 0;
break;
case 107:
values = '+';
type = 1;
break;
case 109:
values = '-';
type = 1;
break;
case 106:
values = '*';
type = 1;
break;
case 111:
values = '/';
type = 1;
break;
case 13:
require();
type = 1;
break;
case 187:
require();
type = 1;
break;
//end if()
default:
if(check_validate1(values)){
alert('不允许输入非数字及运算符以外的其他符号！');
}else{
keyDownSearch();
}//end if
}//end func switch()
if(type==0){
num = num + values;
objOpe.value = num;
}else if(type==1){
objOpe.value = values;
varArr[index] = num;//把在计算其中输入的数字放到数组中
index = index+1;//每当调用一次数学运算符代表前面一个数字输入完毕
// alert("varArr[index] == "+varArr[index-1] + "   operate num="+num);
num = ''; //用来记录两个运算符之间的数字，每次碰到运算符就把该字符串清空
varArr[index] = values;//把在计算其中输入的运算符放到数组中
index = index+1;
}//end if()
}//end func inpNum
-->

//1.js验证只能输入数字.
function check_validate1(value){
//定义正则表达式部分
var reg = /^\d+$/;
if( value.constructor === String ){
var re = value.match( reg );
return true;
}
return false;
}

</script>

</head>
<body>
<form action="calculator.php" method="get"></form>
<input type="hidden" name="urlVar" id="urlVar" value=''/>
<input type="text" name="show" id="show" value="0" οnclick='onRemove()' οnkeyup='inpNum()' style="width:130px;height:25px;text-align:right;"/>
<table>
<tr>
<td><input type="button" name="one" id="one" value='1' οnclick="operate('one')"></td>
<td><input type="button" name="two" id="two" value='2' οnclick="operate('two')"></td>
<td><input type="button" name="three" id="three" value='3' οnclick="operate('three')"></td>
<td><input type="button" name="plus" id="plus" value='+' οnclick="operate('plus')"></td>
<td rowspan="2"><input type="reset" name="reset" id="reset" value="重
置" style="width:30px;height:44px;"></td>
</tr>
<tr>
<td><input type="button" name="four" id="four" value='4' οnclick="operate('four')"></td>
<td><input type="button" name="five" id="five" value='5' οnclick="operate('five')"></td>
<td><input type="button" name="six" id="six" value='6' οnclick="operate('six')"></td>
<td><input type="button" name="reduce" id="reduce" value='-' οnclick="operate('reduce')"></td>
</tr>
<tr>
<td><input type="button" name="seven" id="seven" value='7' οnclick="operate('seven')"></td>
<td><input type="button" name="eight" id="eight" value='8' οnclick="operate('eight')"></td>
<td><input type="button" name="nine" id="nine" value='9' οnclick="operate('nine')"></td>
<td><input type="button" name="multiply" id="multiply" value='*' οnclick="operate('multiply')"></td>
<td rowspan="2"><input type="submit" name="submit" id="submit" value="确
定" οnclick="require()" style="width:30px;height:44px;"></td>
</tr>
<tr>
<td colspan='2'><input type="button" name="zero" id="zero" value='0' οnclick="operate('zero')" style="width:50px;"></td>
<td><input type="button" name="point" id="point" value='.' οnclick="operate('point')"></td>
<td><input type="button" name="divide" id="divide" value='/' οnclick="operate('divide')"></td>
</tr>
</table>

</body>
</html>

后台处理页面（culculator.php）：

<?php
$jsonVar = $_REQUEST['jsonVar'];
$varArr = json_decode(stripslashes($jsonVar)); //反序列化之后的值
//echo '<br>varArr='.var_dump($varArr);
$expr;

foreach ($varArr as $key=>$value){
if ($key==0) {$expr = $value; }
if ($key==0 && ($value==null || $value=='')) {$expr = 1; }//当第一个没有输入数字直接调用运算符时，默认为：1

//这两个if用来防止连续输入运算符产生的bug
if (@stristr('+-*/',$varArr[$key]) && ($varArr[$key+1]==null || $varArr[$key+1]=='' )){continue;}
if (@stristr('+-*/',$varArr[$key-1]) && ($varArr[$key]==null || $varArr[$key]=='' )){continue;}

switch ($value){
case '+':
$expr = $expr + (float)$varArr[$key+1];
break;
case ' ':
$expr = $expr + (float)$varArr[$key+1];
break;
case '':
$expr = $expr + (float)$varArr[$key+1];
break;
case NULL:
$expr = $expr + (float)$varArr[$key+1];
break;
case '-':
$expr = $expr - (float)$varArr[$key+1];
break;
case '*':
$expr = $expr * (float)$varArr[$key+1];
break;
case '/':
$expr = $expr / (float)$varArr[$key+1];
break;
default:
continue;
}//end switch()

}//end foreach
//echo "<BR>值：".$expr;
exit($expr);
?>