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