面向对象初体验-计算器

先上测试地址

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

你可能感兴趣的:(面向对象)