<!DOCTYPE html> 
<html> 
<meta name="content-type" content="text/html; charset=UTF-8"> 
<head>
<title>计算器</title> 
<link rel="stylesheet" href="css/calculator.css">
<script src="js/calculator.js"></script>

</head> 
<body> 
<table width="200" border="1px" class="table" bgColor="#E0EBEB">
<tr>          
<td colspan="5">
<div class="poto"><img src="img/计算器.png">计算器</div>
<p>
<a href="http://www.cnblogs.com/deny-66/">查看(V)</a>
<a href="http://www.cnblogs.com/deny-66/">编辑(E)</a>
<a href="http://www.cnblogs.com/deny-66/">帮助(H)</a>
</p>
</td>
</tr>
<tr>
<td colspan="5"> 
<input type="text" id="nummessege"> 
</td> 
</tr> 
<tr> 
<td> 
<input type ="button" value="MC">
</td> 
<td> 
<input type ="button" value="MR">
</td> 
<td> 
<input type ="button" value="MS">
</td> 
<td>  
<input type ="button" value="M+">
</td> 
<td> 
<input type ="button" value="M-">
</td> 
</tr> 
<tr>
<td> 
<input type ="button" value="←" id="del" onclick="numDel()">
</td>  
<td> 
<input type ="button" value="CE">
</td> 
<td> 
<input type ="button" value="C" id="empty" onclick="numEmpty()">
</td> 
<td> 
<input type ="button" value="±">
</td> 
<td> 
<input type ="button" value="√">
</td> 
</tr> 
<tr> 
<td> 
<input type ="button" value="7" id="7" onclick="onclicknum(7)">
</td> 
<td> 
<input type ="button" value="8" id="8" onclick="onclicknum(8)">
</td> 
<td> 
<input type ="button" value="9" id="9" onclick="onclicknum(9)">
</td> 
<td> 
<input type ="button" value="/" id="chu" onclick="onclicknum('/')">
</td> 
<td> 
<input type ="button" value="%" id="mo" onclick="onclicknum('%')">
</td> 
</tr> 
<tr> 
<td> 
<input type ="button" value="4" id="4" onclick="onclicknum(4)">
</td> 
<td> 
<input type ="button" value="5" id="5" onclick="onclicknum(5)">
</td> 
<td> 
<input type ="button" value="6" id="6" onclick="onclicknum(6)">
</td>
<td> 
<input type ="button" value="*" id="cheng" onclick="onclicknum('*')">
</td> 
<td> 
<input  type ="button" value="1/x">
</td>  
</tr> 
<tr> 
<td> 
<input type ="button" value="1" id="1" onclick="onclicknum(1)">
</td> 
<td> 
<input type ="button" value="2" id="2" onclick="onclicknum(2)">
</td> 
<td> 
<input type ="button" value="3" id="3" onclick="onclicknum(3)">
</td>
<td> 
<input type ="button" value="-" id="point" onclick="onclicknum('-')" >
</td> 
<td rowspan="2"> 
<input type="button" value="=" id="dengyu" 
onclick="dengyu()" 
style="height: 92px; width: 65px; font-size: 27px"></td> 
</tr> 
<tr> 
<td height="45" colspan="2"> 
<input type ="button" value="0" id="0" onclick="onclicknum(0)"
style="height: 45px; width: 135px; font-size: 27px">
</td> 
<td> 
<input type ="button" value="." id="dian" onclick="onclicknum('.')" >
</td> 
<td> 
  <input type ="button" value="+" id="jia" onclick="onclicknum('+')">
</td> 
</tr> 
</table> 
</body> 
</html> 






 body{


　　　　height: 450px;


　　　　width: 300px;


　　　　margin:auto;


　　　　position:absolute;


　　　　top:0; left: 0; right: 0; bottom: 0;


　　　　background-color:#BFDCAC;


 }


.table{


　　　　width:100%;


　　　　height:400px; 


}


.poto{


　　　　margin-top:0 auto;


　　　　margin-bottom:0 auto; 


}


#nummessege{


　　　　width: 100%;


　　　　height: 50px;


　　　　border-radius:7px;


　　　　border-color:#D282D2;


　　　　text-align:right; 


}


input{


　　　　height: 43px;


　　　　width: 65px;


　　　　font-size: 18px; 


}


p{


　　　　text-align:left;


　　　　font-size:14px; 


}


p a:hover{


　　　　color:#F00; 


}


p a{ 　


　　　　text-decoration: none; 


}






var numresult;
var str; 
function onclicknum(nums){ 
str = document.getElementById("nummessege"); 
str.value = str.value + nums; 
} 
function numEmpty(){ 
str = document.getElementById("nummessege"); 
str.value = ""; 
} 
function numDel(){ 
str = document.getElementById("nummessege"); 
str.value = str.value.substring(0,str.value.length-1); 
} 
function dengyu(){ 
str = document.getElementById("nummessege"); 
numresult = eval(str.value); 
str.value = numresult; 
}