标签：
先上测试地址
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"> <title>计算器</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link href="http://www.bootcss.com/p/buttons/css/buttons.css" rel="stylesheet"> <script type="text/javascript"> function jisuan(num){ var i = document.getElementById("mianban"); //获取显示面板 i.innerHTML=i.innerHTML+num; }; //第一个函数，获取按钮，按下后显示在显示面板中 var qian=""; //前一个数，当点击运算符后，保存这个数 var hou=""; //后一个数，当点击运算符后，面板显示这个数 var jieguo=""; //计算结果保存 var suanfa=""; //计算方法保存 + - * / function plus(){ var j = document.getElementById("mianban"); qian=j.innerHTML; j.innerHTML=""; suanfa="+"; }; //点击运算符时，情况面板并获取清空前面板显示的一个数保存在qian，并给suanfa赋值 function jian(){ var j = document.getElementById("mianban"); qian=j.innerHTML; j.innerHTML=""; suanfa="-"; }; //点击运算符时，情况面板并获取清空前面板显示的一个数保存在qian，并给suanfa赋值 function cheng(){ var j = document.getElementById("mianban"); qian=j.innerHTML; j.innerHTML=""; suanfa="*"; }; //点击运算符时，情况面板并获取清空前面板显示的一个数保存在qian，并给suanfa赋值 function chu(){ var j = document.getElementById("mianban"); qian=j.innerHTML; j.innerHTML=""; suanfa="/"; }; //点击运算符时，情况面板并获取清空前面板显示的一个数保存在qian，并给suanfa赋值 function jg(){ var k = document.getElementById("mianban"); hou=k.innerHTML; qian=parseInt(qian); hou=parseInt(hou); //将之前保存的qian与现在数字转为NUm。 if (suanfa=="+") { jieguo=qian+hou; }else if(suanfa=="-"){ jieguo=qian-hou; }else if(suanfa=="*"){ jieguo=qian*hou; }else{ jieguo=qian/hou; }; k.innerHTML=jieguo; } //根据suanfa判断+-*/并计算出结果 function qing(){ var k = document.getElementById("mianban"); k.innerHTML="" //将显示面板清空 } </script> <style type="text/css"> body { font-family : "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu; font-size : 1em; color : #fff; } </style> <body style="background-color:#003333;"> <h1 style="color:#fff">滚你大爷</h1> <div class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"> <div style="padding:10px;background-color:#009999;width:360px;height:500px;border-radius: 10px;"class="text-center"> <div style="font-size:24px;background-color:#000033;padding-top:10px;padding-bottom:10px;height:60px;padding-right:20px"id="mianban"class="text-right"></div> <div class="row"style="padding-top:20px"> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="jisuan(1)">1</a> </div> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="jisuan(2)">2</a> </div> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="jisuan(3)">3</a> </div> </div> <div class="row"style="padding-top:20px"> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="jisuan(4)">4</a> </div> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="jisuan(5)">5</a> </div> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="jisuan(6)">6</a> </div> </div> <div class="row"style="padding-top:20px"> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="jisuan(7)">7</a> </div> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="jisuan(8)">8</a> </div> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="jisuan(9)">9</a> </div> </div> <div class="row"style="padding-top:20px"> <div class="col-xs-4"> </div> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="jisuan(0)">0</a> </div> <div class="col-xs-4"> </div> </div> <div class="row"style="padding-top:60px"> <div class="col-xs-4"> <a class="button button-3d button-roundedon"onclick="plus()">+</a> </div> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="jian()">-</a> </div> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="cheng()">X</a> </div> </div> <div class="row"style="padding-top:20px"> <div class="col-xs-4"> <a class="button button-3d button-rounded"onclick="chu()">/</a> </div> <div class="col-xs-4"> <a class="button button-3d button-primary button-rounded"onclick="jg()">=</a> </div> <div class="col-xs-4"> <a class="button button-3d button-primary button-rounded" onclick="qing()">清</a> </div> </div> </div> </div> <div class="col-xs-4"></div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script type="text/javascript"> </script> </body> </html>
点击链接查看效果，或直接把以上源码拷贝到项目中进行测试。
function jisuan(num){ var i = document.getElementById("mianban"); //获取显示面板 i.innerHTML=i.innerHTML+num; };
0-9的按钮，通过输入一个数，在面板中进行添加，通过面向对象的方式，即使按钮为999，也可以进行输入。只需要 jisuan(999);
加减乘除的基本语句是有一样的，主要是 suanfa="+"; 当点击运算符时，四个运算符会分别返回+-*/给算法。
最后等号就是对suanfa进行判断，不同的算法进行不同的运算。
标签：
原文地址：http://www.cnblogs.com/lanjianwc/p/4591713.html
