HTML,CSS,JavaScript实现简易计算器

写在前面

用一定的的js代码,实现一个简单的四则运算的计算器,样式大概就是下面这个样子滴, 然后是可以实现基本运算的哈！

进入代码

1. html代码

<div class="container">
    <h1>HTML,CSS,JavaScript实现简易计算器</h1>
    <form name="calculator">
      <input type="text" id="display">
      <input type="button" id="clear" class="btn other" value="C">
      <br>
      <input type="button" onclick="get(this.value)" class="btn number" value="7">
      <input type="button" onclick="get(this.value)" class="btn number" value="8">
      <input type="button" onclick="get(this.value)" class="btn number" value="9">
      <input type="button" onclick="get(this.value)" class="btn operator" value="/">
      <br>
      <input type="button" onclick="get(this.value)" class="btn number" value="4">
      <input type="button" onclick="get(this.value)" class="btn number" value="5">
      <input type="button" onclick="get(this.value)" class="btn number" value="6">
      <input type="button" onclick="get(this.value)" class="btn operator" value="*">
      <br>
      <input type="button" onclick="get(this.value)" class="btn number" value="1">
      <input type="button" onclick="get(this.value)" class="btn number" value="2">
      <input type="button" onclick="get(this.value)" class="btn number" value="3">
      <input type="button" onclick="get(this.value)" class="btn operator" value="+">
      <br>
      <input type="button" onclick="get(this.value)" class="btn number" value="0">
      <input type="button" onclick="get(this.value)" class="btn operator" value=".">
      <input type="button" onclick="calculate();" class="btn other" value="=">
      <input type="button" onclick="get(this.value)" class="btn operator" value="-">
    </form>
  </div>
           

1. css代码

* {
  margin: 0;
  padding: 0;
  border: none; /* input标签默认有border要去掉*/
}
.container {
  width: 600px;
  height: 600px;
  margin: auto;
}
h1 {
  text-align: center;
  margin-top: 20px;
  padding: 40px 0;
  color: #e66767;
}

form {
  width: 280px;
  margin: 40px auto;
  padding: 40px 0 30px 30px;
  background-color: #495678;
  box-shadow: 4px 4px #2c3e50;
  border-radius: 25px;
}

.btn {
  cursor: pointer;
  outline: none;
  width: 45px;
  height: 45px;
  margin:10px 0 5px 10px;
  border-radius: 50%;
  font-size: 20px;
  background-color: #57606f;
}

#display {
  outline: none;
  width: 165px;
  height: 40px;
  background-color: #98d1dc;
  box-shadow: inset 4px 4px 0px #3facc0;
  border-radius: 20px;
  font-size: 20px;
  color: aliceblue;
  padding-left: 10px;
  margin-left: 10px;
}

#clear {
  margin-left: 0;
}

.number {
  color: azure;
  background-color: #72778b;
  box-shadow: 0px 4px #5f6680;
}

.operator {
  color: #57606f;
  background-color: #dce1f5;
  box-shadow: 0 4px #c0c1c7;
}

.other {
  color: azure;
  background-color: #e67e22;
  box-shadow: 0 4px #e76a3d;
}

.number:active,
.operator:active,
.other:active {
  box-shadow: 0 2px #5f6680;
  transform: translateY(2px);
  -webkit-transform: translateY(2px);
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -o-transform: translateY(2px);
}
           

1. js代码

function get(value) {
  document.getElementById('display').value += value;
}

function calculate() {
  var result = 0;
  result = document.getElementById('display').value;
  document.getElementById('display').value = eval(result);  //计算字符串的值
};

document.getElementById('clear').addEventListener('click',function() {
  document.getElementById('display').value = '';
});