先上效果圖：
簡單的加減乘除功能還是有的，所以我們就考慮怎么來實現這個功能。
根據預期效果，可以確定頁面中的布局要用到table tr td。
所以先放上頁面布局,table的邊框寬度border，colspan來設置某一行的寬度為4倍一列寬度，顯示結果的地方要顯示輸入的所有值，先用id來區分，給value一個空，來獲取其他按鈕鍵入的value值，用name來命名：
<body>
<table border="1">
<!--顯示結果行-->
<tr><td colspan="4"><input id="inp1" type="text" value="" name="xianshi"/></td></tr>
<!--第一行 清除按鈕-->
<tr>
<td><input type="button" value="Clear" onclick="inputPCB(this)"/></td>
</tr>
<!--第二行-->
<tr>
<td><input type="button" value="1" onclick="inputEvent(this)"/></td>
<td><input type="button" value="2" onclick="inputEvent(this)"/></td>
<td><input type="button"value="3" onclick="inputEvent(this)"/></td>
<td><input type="button" value="4" onclick="inputEvent(this)"/></td>
</tr>
<!--第三行-->
<tr>
<td><input type="button" value="5" onclick="inputEvent(this)"/></td>
<td><input type="button" value="6" onclick="inputEvent(this)"/></td>
<td><input type="button"value="7" onclick="inputEvent(this)"/></td>
<td><input type="button" value="8" onclick="inputEvent(this)"/></td>
</tr>
<!--第四行-->
<tr>
<td><input type="button" value="9" onclick="inputEvent(this)"/></td>
<td><input type="button" value="0" onclick="inputEvent(this)"/></td>
<td><input type="button"value="." onclick="inputEvent(this)"/></td>
<td><input type="button" value="=" onclick="inputEquel(this)"/></td>
</tr>
<!--第五行-->
<tr>
<td><input type="button" value="+" onclick="inputOper(this)"/></td>
<td><input type="button" value="-" onclick="inputOper(this)"/></td>
<td><input type="button"value="*" onclick="inputOper(this)"/></td>
<td><input type="button" value="/" onclick="inputOper(this)"/></td>
</tr>
</table>
</body>
除了清除按鈕是晴空所有外，其他1234567890的按鈕通用onclick=inputEvent(this)，來直接鍵入它的value值，這是唯一的值。運算符±*/通過操作函數inputOper來執行運算命令。
下面是JS內容，JS的各部分功用標注在注釋里面：
<script type="text/javascript">
/* 定義一個Calculator類*/
function Calculator(){
this.jisuan=function(num1,num2,oper){
var res=0;
switch(oper){
case "+":
res=num1+num2;
break;
case "-":
res=num1-num2;
break;
case "*":
res=num1*num2;
break;
case "/":
res=num1/num2;
break;
}
return res;
}
}
//創建對象
var calculator=new Calculator();
/*定義全局變量*/
var val=0; //放置輸入的值
var xval=0;//保存轉換Number類型的值
var temp=0; //保存第一次輸入的值
var oper="";//保存輸入的操作符
/*獲取輸入數字*/
function inputEvent(e){
val=e.value
var xsval=document.getElementById("inp1");
xsval.value+=val; //連續輸入數字(String類型)
//轉換Number類型
xval=parseFloat(xsval.value);
}
/*獲取第一行的數據*/
function inputPCB(e){
//window.alert(e.value);
var xsval=document.getElementById("inp1");
if(e.value=="Clear"){
xsval.value="";
}
}
/*輸入操作符*/
function inputOper(e){
oper=e.value;
//window.alert(typeof oper);
//oper=oper.substr(0);
if (e.value=="+"){
var xsval=document.getElementById("inp1");
//保存上次計算結果，並對字符串進行轉換Number類型
temp=parseFloat(xsval.value);
//第一次輸入的值設置為空
xsval.value="";
}else if(e.value=="-"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}else if(e.value=="*"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}else if(e.value=="/"){
var xsval=document.getElementById("inp1");
temp=parseFloat(xsval.value);
xsval.value="";
}
}
/*計算結果*/
function inputEquel(e){
var xsval=document.getElementById("inp1");
if(e.value=="="){
//window.alert(xval);
//調用對象方法
xsval.value=calculator.jisuan(temp,xval,oper);
}
}
</script>
樣式表簡單寫一下：
<style>
input{
width:60px;
}
#inp1{
width:280px;
text-align:right;
}
</style>
這就是一個簡單的完整的使用原生JS寫出來的計算器效果。