<style>
#calculate {
line-height: 60px;
text-align: center;
background: #ccc;
font-size: 16px;
font-weight: bold;
}
#calculate tbody input{
width: 100%;
height: 60px;
background:#033;
color: #fff;
font: bold 16px/1em 'Microsoft yahei';
}
#calculate tbody td{
width: 25%;
background: #fff;
}
#calculate_outPut{
font-size: 20px;
letter-spacing:2px;
background:#fff;
height: 40px;
border: none;
text-align: right;
width: 100%;
}
</style>
<table width="300" border="0" cellspacing="1" cellpadding="0" >
<thead >
<tr>
<td colspan="4" align="right"><input value="0" disabled="disabled"></td>
</tr>
</thead>
<tbody >
<tr>
<td><label>
<input type="button" name="button" value="7" _type='num' />
</label></td>
<td><input type="button" value="8" _type='num' /></td>
<td><input type="button" value="9" _type='num' /></td>
<td><input type="button" value="/" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="4" _type='num' /></td>
<td><input type="button" value="5" _type='num' /></td>
<td><input type="button" value="6" _type='num' /></td>
<td><input type="button" value="*" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="1" _type='num' /></td>
<td><input type="button" value="2" _type='num' /></td>
<td><input type="button" value="3" _type='num' /></td>
<td><input type="button" value="-" _type='op' /></td>
</tr>
<tr>
<td><input type="button" value="0" _type='num' /></td>
<td><input type="button" value="+/-" _type='+/-' /></td>
<td><input type="button" value="." _type='.' /></td>
<td><input type="button" value="+" _type='op' /></td>
</tr>
<tr>
<td colspan="2" ><input type="button" value="backspace" _type='bs' /></td>
<td><input type="button" value="C" _type='cls' /></td>
<td><input type="button" value="=" _type='eval' /></td>
</tr>
</tbody>
</table>
<script>
// Calculate the object
var operateExp={
'+':function(num1,num2){return num1+num2;},
'-':function(num1,num2){return num1-num2;},
'*':function(num1,num2){return num1*num2;},
'/':function(num1,num2){return num2===0?0:num1/num2;}
}
// Calculate the function
var operateNum=function(num1,num2,op){
if(!(num1&&num2))return;
//Make sure num1 and num2 are numbers
num1=Number(num1);
num2=Number(num2);
//There is no operator, and num1 is returned;
if(!op)return num1;
//Matching operation formula
if(!operateExp[op])return 0;
return operateExp[op](num1,num2);
}
//Display panel
var calculate_outPut=("calculate_outPut");
//Operation panel
var calculate_num=("calculate_num");
var result=0;// Calculation result
var isReset=false;//Whether to reset
var operation;//operator
//Set the display value
function setScreen(num){
calculate_outPut.value=num;
}
//Get the display value
function getScreen(){
return calculate_outPut.value;
}
//Add a click event
calculate_num.onclick=function(e){
var ev = e || ;
var target = || ;
if(=="button"){
var mark=("_type");//Get the custom attributes of the current click button.
var value=;//get the current value
var num=getScreen();//Get the value of the current box
if(mark==='bs'){//Backspace key
if(num==0)return;
var snum=(num).toString();
if(<2)
setScreen(0);
else
setScreen(().slice(0,-1));
}
if(mark==='num'){//Num keys
if(num==='0'||isReset){//There is an operator or the display is 0
setScreen(value);
isReset=false;
return;
}
setScreen(().concat(value));
}
if(mark==="."){//Decimal point
var hasPoint=().indexOf(".")>-1;
if(hasPoint){
if(isReset){
setScreen("0"+value);
isReset=false;
return;
}
return;
}
setScreen(().concat(value));
}
if(mark==="+/-"){//Positive and negative sign
setScreen(-num);
}
if(mark==="op"){//If the operator is clicked, design the first operand
if(isReset)return;
isReset=true;
if(!operation){
result=+num;
operation=value;
return;
}
result=operateNum(result,num,operation);
setScreen(result);
operation=value;
}
if(mark==="cls"){//Clear
result=0;
setScreen(result);
isReset=false;
}
if(mark==="eval"){//Calculation
if(!operation)return;
result=operateNum(result,num,operation);
setScreen(result);
operation=null;
isReset=false;
}
}
}
</script>
View Code