<!DOCTYPE html>
<html>
<head>
<title>网页计算器</title>
</head>
<body>
<textarea id="test" cols="15" rows="5" wrap="hard"></textarea>
<!-- 创建表单元素 -->
<form name="f1" method="post" >
<!-- 第1层表 -->
<table align="center" width="330" border="1">
<caption>网页计算器</caption>
<tr>
<td >
<!-- <input type="text" name="like" value="0" id="inputText"> -->
<h1 id="inputText">0</h1>
</td>
</tr>
<tr>
<td>
<!-- 第2层表 -->
<table align="center" width="330" >
<tr>
<td ><button name="b1" type="button" id="buttonOne" οnclick="clean()" >清空</button></td>
</tr>
<tr>
<td ><button name="b1" type="button" id="buttonOne" οnclick="input('7')" >7</button></td>
<td ><button name="b2" type="button" id="buttonOne" οnclick="input('8')" >8</button></td>
<td ><button name="b3" type="button" id="buttonOne" οnclick="input('9')" >9</button></td>
<td ><button name="b4" type="button" id="buttonOne" οnclick="input('x')" >x</button></td>
</tr>
<tr>
<td ><button name="b5" type="button" id="buttonOne" οnclick="input('4')" >4</button></td>
<td ><button name="b6" type="button" id="buttonOne" οnclick="input('5')">5</button></td>
<td ><button name="b7" type="button" id="buttonOne" οnclick="input('6')" >6</button></td>
<td ><button name="b8" type="button" id="buttonOne" οnclick="input('-')">-</button></td>
</tr>
<tr>
<td ><button name="b9" type="button" id="buttonOne" οnclick="input('1')" >1</button></td>
<td ><button name="b10" type="button" id="buttonOne" οnclick="input('2')" >2</button></td>
<td ><button name="b11" type="button" id="buttonOne" οnclick="input('3')" >3</button></td>
<td ><button name="b12" type="button" id="buttonOne" οnclick="input('+')">+</button></td>
</tr>
<tr>
<td ><button name="b13" type="button" id="buttonOne" οnclick="input('/')" >/</button></td>
<td ><button name="b14" type="button" id="buttonOne" οnclick="input('0')">0</button></td>
<td ><button name="b15" type="button" id="buttonOne" οnclick="input('.')" >.</button></td>
<td ><button name="b16" type="button" id="buttonOne" οnclick="input('=')" >=</button></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
<!-- 定义 id选择器 -->
<style>
#buttonOne{width: 78px; height: 53px;}
#inputText{width: 320px; height: 25px;border-color: blue;}
</style>
<script type="text/javascript">
var nums=new Array("1","2","3","4","5","6","7","8","9","0",".");
var funs=new Array("+","-","x","/","=");
var inputString="";
var numLeft=0.0;
var numRight=0.0;
var Fun="";
var beFun="";
var result=0.0;
var status=0;
function input(inStr){
//判断是否是数字
if(nums.indexOf(inStr)!=(-1)){
//后台
inputString+=inStr;
//Fun非空，表示这不是输入的第一个数字
beFun=Fun;
//显示
var element=document.getElementById("inputText");
element.innerHTML=inputString;
}else if(funs.indexOf(inStr)!=(-1)){//输入运算符时
if(inputString.indexOf('.')==(-1)){//整数
//存成 右边数
numRight=parseInt(inputString);
}else{
//存成 右边数
numRight=parseFloat(inputString);
}
//结果存入 左边数
numLeft=result;
//清空 输入变量
inputString="";
//存储 运算符
Fun=inStr;
//进行计算
if(beFun!=""){//输入第二个及以后的运算符
switch (beFun){
case '+':
result=numLeft+numRight;
break;
case '-':
result=numLeft-numRight;
break;
case 'x':
result=numLeft*numRight;
break;
case '/':
result=numLeft/numRight;
break;
}
//显示结果
var element=document.getElementById("inputText");
element.innerHTML=result;
}else{//输入了第一个运算符
result=numRight;
}
beFun=Fun;
numLeft=result;
if(inStr=='='){//等号 之后的显示
inputString="";
if(status==1){inputString=numLeft;status=0;}
Fun="";
beFun="";
numRight=result;
result=0.0;
}
}
//显示 调试信息
var element=document.getElementById("test");
element.innerHTML="inputString:"+inputString
+"\nnumLeft:"+numLeft
+"\nnumRight:"+numRight
+"\nFun:"+Fun
+"\nbeFun:"+beFun
+"\nresult:"+result+"\n\n"+element.innerHTML;
}
function clean(){
inputString="";
numLeft=0.0;
numRight=0;
Fun="";
beFun="";
result=0.0;
var element=document.getElementById("inputText");
element.innerHTML=result;
}
</script>
</html>
