面向对象初体验-计算器

先上测试地址

http://lanjianwc.sinaapp.com/

<!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进行判断，不同的算法进行不同的运算。

面向对象初体验-计算器

推荐阅读