html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo7.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo7.js"></script>
</head>
<body>
<table>
<tr>
<td colspan="4">
<input id="txtResult" type="text" readonly="readonly" />
</td>
</tr>
<tr>
<td>
<input id="btn1" type="button" value="1" class="num" />
</td>
<td>
<input id="btn2" type="button" value="2" class="num" />
</td>
<td>
<input id="btn3" type="button" value="3" class="num" />
</td>
<td>
<input id="btnAdd" type="button" value="+" class="Oper" />
</td>
</tr>
<tr>
<td>
<input id="btn4" type="button" value="4" class="num" />
</td>
<td>
<input id="btn5" type="button" value="5" class="num" />
</td>
<td>
<input id="btn6" type="button" value="6" class="num" />
</td>
<td>
<input id="btnMinus" type="button" value="-" class="Oper" />
</td>
</tr>
<tr>
<td>
<input id="btn7" type="button" value="7" class="num" />
</td>
<td>
<input id="btn8" type="button" value="8" class="num" />
</td>
<td>
<input id="btn9" type="button" value="9" class="num" />
</td>
<td>
<input id="btnMultiply" type="button" value="*" class="Oper" />
</td>
</tr>
<tr>
<td>
<input id="btn0" type="button" value="0" class="num" />
</td>
<td>
<input id="btnClear" type="button" value="C" />
</td>
<td>
<input id="btnEqual" type="button" value="=" />
</td>
<td>
<input id="btnDivision" type="button" value="/" class="Oper" />
</td>
</tr>
</table>
</body>
</html>
css:
body {
}
table
{
padding:5px;
border:solid 1px #cccccc;
border-collapse:collapse;
}
table td
{
border:solid 1px #cccccc;
40px;
text-align:center;
height:30px;
}
js:
var sRecordLink = "";
var sRecordNum1 = ""
var sRecordNum2 = ""
var sRecordOper = "";
var sResult = "";
$(function () {
//清除
$("#btnClear").click(function () {
$("#txtResult").val("");
sRecordNum = "";
sRecordNum1 = "";
sRecordNum2 = "";
sRecordOper = "";
sResult = "";
});
$(".num").click(function () {
sRecordLink = $("#txtResult").val();
$("#txtResult").val(sRecordLink + $(this).val());
if (sRecordOper == "") {
sRecordNum1 = $("#txtResult").val();
}
else {
sRecordNum2 = $("#txtResult").val();
}
});
$(".Oper").click(function () {
sRecordLink = "";
sRecordOper = $(this).val();
$("#txtResult").val("");
});
$("#btnEqual").click(function () {
OperNum();
});
});
function OperNum() {
switch (sRecordOper) {
case "+":
{
sResult = (parseInt(sRecordNum1) + parseInt(sRecordNum2)).toString();
break;
}
case "-":
{
sResult = (parseInt(sRecordNum1) - parseInt(sRecordNum2)).toString();
break;
}
case "*":
{
sResult = (parseInt(sRecordNum1) * parseInt(sRecordNum2)).toString();
break;
}
case "/":
{
sResult = (parseInt(sRecordNum1) / parseInt(sRecordNum2)).toString();
break;
}
default:
{
break;
}
}
$("#txtResult").val(sResult);
sRecordNum1 = sResult;
sRecordNum2 = "";
sRecordOper = "";
sRecordLink = "";
}