用JS来模拟下计算器DEMO功能

作者：天空2019.06.10来源：Web前端之家浏览：9610评论:0

用JS来模拟下计算器DEMO功能，看下效果图：

源码基于javascript，不多说了，直接上源码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>计算器</title>
  <style>
      /*Basic reset*/
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font: 14px Arial,sans-serif;
}
html{
  height:100%;
  background-color:lightslategrey;
}

#calculator{
  margin: 15px auto;
  width:330px;
  height:400px;
  border: 1px solid lightgray;
  background-color:darkgrey;
  padding:15px;
}

/*LOGO*/
.LOGO{
  height:20px;

}
.LOGO .name{
  float:left;
  line-height:30px;
}
/*screen*/

#shuRu{
  margin-top:15px;
}
.screen{
  margin-top:5px;
  width:300px;
  height:40px;
  text-align: right;
  padding-right:10px;
  font-size:20px;
}

#keys{
  border:1px solid lightgray;
  height:223px;
  margin-top:25px;
  padding:8px;
}

#keys .last{
  margin-right:0px;
}
.footer{
  margin-top:20px;
  height:20px;
}

#keys button{
  float:left;
  width: 42px;
  height: 36px;
  text-align:center;
  background-color:lightgray;
  margin: 0 17px 20px 0;
  color: #000;
  border-top: 2px solid threedlinghtshadow;
}
  </style>
</head>
<body>
<div id="calculator">
  <div class="LOGO">
    <span class="name">简单的计算器</span>   
  </div>
  <div id="shuRu">
    <!--screen输入栏-->
    <div class="screen">
      <input type="text" id="screenName" name="screenName" class="screen" value="110">
    </div>
  </div>
  <div id="keys">
    <!-- operators and other keys -->
    <!--第一排-->
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>Back</button>
    <button style="margin-right:0px">C</button>
    <!--第二排-->
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>*</button>
    <button style="margin-right:0px">/</button>
    <!--第三排-->
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>+</button>
    <button style="margin-right:0px">-</button>
    <!--第四排-->
    <button>0</button>
    <button>00</button>
    <button>.</button>
    <button>%</button>
    <button style="margin-right:0px">=</button>
  </div>
  <div class="footer">
    <span class="aside">欢迎使用JavaScript计算器</span>     
  </div>
</div>
<script>
window.onload=function(){ 
  var clearNum = document.querySelector("#C");
  var monitor = document.querySelector("#screenName");
  var arr ="";
  var kids = document.getElementById("keys").getElementsByTagName("button"); 
  //清空
  monitor.value='';

 for (var i = 0; i < kids.length; i++) {
     kids[i].index =i;
     kids[i].onclick=function(){
        //清空
        if(this.innerText=='C'){
          arr='';
          monitor.focus();
        } 
        //退格
        else if(this.innerText=='Back'){
          arr=String(arr).slice(0,String(arr).length-1);          
        }
        //计算
        else if(this.innerText=='='){
            arr = eval(arr);
        } 
        //累加
        else{           
          arr += this.innerText;
        };
        //输出
        monitor.value = arr;
     };
   };
};
</script>
</body>
</html>

赏您的支持是我们创作的动力！