<!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>
