<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

​

<div class="calculator">

  <h1>计算器</h1>

  <input type="textbox" class="textbox" readonly>

  <div class="buttons">

    <button class="button" value="AC">C</button>

    <button class="button" value="CE"><i class="fa fa-long-arrow-left"></i></button>

    <button class="button" value="%">%</button>

    <button class="button" value="/">&divide</button>

    <button class="button" value="7">7</button>

    <button class="button" value="8">8</button>

    <button class="button" value="9">9</button>

    <button class="button" value="*">&times</button>

    <button class="button" value="4">4</button>

    <button class="button" value="5">5</button>

    <button class="button" value="6">6</button>

    <button class="button" value="-">-</button>

    <button class="button" value="1">1</button>

    <button class="button" value="2">2</button>

    <button class="button" value="3">3</button>

    <button class="button" value="+">+</button>

    <button class="button" value="()">()</button>

    <button class="button" value="0">0</button>

    <button class="button" value=".">.</button>

    <button class="button" value="=">=</button>

  </div>

</div>

var ans = "";

var clear = false;

var calc = "";//初始化数据

$(document).ready(function() {

  $("button").click(function() {

    var text = $(this).attr("value");//点击按钮事件发生文本内容为按钮值

    //如果输入为1-10和加减乘除余

    if(parseInt(text, 10) == text || text === "." || text === "/" || text === "*" || text === "-" || text === "+" || text === "%") {

      //不为空时

      if(clear === false) {

        calc += text;

        $(".textbox").val(calc);

      }

      //为空时

      else {

        calc = text;

        $(".textbox").val(calc);

        clear = false;

      }

    } 

    //按下清除键的时候

    else if(text === "AC") {

      calc = "";

      $(".textbox").val("");//输出空值         

    } 

     //按下回退键时，数组calc保留除最后一个字符外的字符，生成新的字符串

    else if(text === "CE") {

      calc = calc.slice(0, -1);

      $(".textbox").val(calc);

    }

    //按下等号时用eval()函数计算字符串

    else if(text === "=") {

      ans = eval(calc);

      $(".textbox").val(ans);

      clear = true;

    }

  });

});

html, body {

  height: 100%;

  width: 100%;

  background-color: #56351E;

}

h1 {

  margin-top: 10px;

  color: #ffffff;

}

button {

  height: 50px;

  border: none;

}

.calculator {

  text-align: center;

  width: 300px;

  height: 420px;

  border-radius: 10px;

  margin: auto;

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background-color: #000020;

  padding: 5px;

}

.buttons {

  width: 275px;

  text-align: center;

  margin:10px auto;

}

.button{

  float: left;

  margin: 2px;

  width: 64.75px;

  color: #ffffff;

  background: #000020;

  cursor: pointer;

}

.textbox {

  margin-top: 10px;

  text-align: right;

  font-size:100px

  border: none;

  height: 50px;

  width: 270px;

  color: #ffffff;

  background-color: #000030;

}