由于比较简单，直接贴代码...
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.11.1.js"></script>
<script>
//定义两个数字变量，用来保存两个操作的数字
var number1 = 0;
var number2 = 0;
//定义两个数字字符串，用来保存没一次保存的值
var numberStr1 = "";
var numberStr2 = "";
//定义一个字符串，用来表示操作符
var caculator = "";
//定义一个字符串，用来表示整个表达式
var result = "";
//标识符，当flag = false 代表添加第一个操作数字，当flag = true 代表添加第二个操作数字
var flag = false;
$(function(){
//为每个数字绑定监听事件
$(".number").click(function(){
$("#result").html(""); //清空表达式内容
//添加操作数字
if(!flag)
addNumber1($(this).val());
else
addNumber2($(this).val());
});
//为 / * - + = 绑定事件
$(".caculator").click(function(){
if(result == null || result == "") {
alert("请添加第一个操作数，否则无法添加操作符");
return;
}
var caculator = $(this).val();
if(flag && caculator != "=") return; //因为添加了第二个操作数字了，所以这里直接返回
//添加第一个操作数，并且添加了操作符之后，那么记录下标识符，然后按下数字就添加第二个操作数
flag = true;
//区分要进行的操作，然后在结果的表达式中，添加操作符
if(caculator == "+"){
addCaculator("+");
}else if(caculator == "/"){
addCaculator("/");
}else if(caculator == "*"){
addCaculator("*");
}else if(caculator == "-"){
addCaculator("-");
}else if(caculator == "="){
//这里执行计算结果
caculate();
}
});
//添加第一个操作数
function addNumber1(num){
//使用连接符 + 会在最前面多了一个0，所以这里去掉第一个0
if(number1 == 0){
number1 = num;
}else{
number1 += num;
}
$("#result").html(number1);
result = number1; //记录表达式的第一个操作数值
}
//添加第二个操作数
function addNumber2(num){
if(number2 == 0){
number2 = num;
}else{
number2 += num;
}
result = result + " " + number2;
$("#result").html(result);
}
//添加操作符
function addCaculator(cal){
caculator = cal;
result = result + " " + caculator
$("#result").html(result);
}
//当点击 = 号的时候，计算操作结果
function caculate(){
var temp;
if(caculator == "+"){
//由于字符串的 + 操作不会自动转换，所以这里手动转换
temp = parseInt(number1) + parseInt(number2);
}else if(caculator == "/"){
if(number2 == "0"){
alert("对不起，除数不能为0");
$("#result").html("");
clear();
return;
}
temp = number1 / number2;
}else if(caculator == "*"){
temp = number1 * number2;
}else if(caculator == "-"){
temp = number1 - number2;
}
$("#result").html(result + " = " + temp);
clear();
}
//清空数据
function clear(){
number1 = 0;
number2 = 0;
result = "";
caculator = "";
flag = false;
}
});
</script>
<title>这是骆宏的计算器</title>
<style>
body, ul, h1, h2, h3, h4, h5, li, ol, span, p, div{
border:0;
margin:0;
}
button{
display:inline-block;
width:70px;
}
#caculator{
background:grey;
width:450px;
margin:0 auto;
}
#result_container{
width:450px;
margin:0 auto;
}
#result{
border:1px solid black;
height:60px;
}
</style>
</head>
<body>
<div id="caculator_container">
<h1 align="center">该计算器只支持最基本的运算，也就是 1 + 2 = 3 这种类型的运算</h1>
<br>
<br>
<br>
<div id="result_container">
<span>结果为:</span><p id="result"></p>
</div>
<div id="caculator">
<table width="400">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><button value="7" class="number">7</button></td>
<td><button value="8" class="number">8</button></td>
<td><button value="9" class="number">9</button></td>
<td><button class="caculator" value="/">/</button></td>
</tr>
<tr>
<td><button value="4" class="number">4</button></td>
<td><button value="5" class="number">5</button></td>
<td><button value="6" class="number">6</button></td>
<td><button class="caculator" value="*">*</button></td>
</tr>
<tr>
<td><button value="1" class="number">1</button></td>
<td><button value="2" class="number">2</button></td>
<td><button value="3" class="number">3</button></td>
<td><button class="caculator" value="-">-</button></td>
</tr>
<tr>
<td></td>
<td><button value="0" class="number">0</button></td>
<td><button class="caculator" value="=">=</button></td>
<td><button class="caculator" value="+">+</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>原文地址：http://blog.csdn.net/u010469003/article/details/41516973
