欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

[web效果实现－2]基础计算器实现

程序员文章站 2024-02-27 13:10:39
...

本文主要是实现了基础计算器，如加、减、乘、除、百分比、正负等，逻辑比较简单，不一一展开。目前仅实现了逻辑，按钮效果等就暂时不实现了。

效果如下：
[web效果实现－2]基础计算器实现
主要代码如下：

<!doctype html>
<html>
<head>
  <style>
  .container{
    background-color: black;
    color:white;
  }
  .gray{
    background-color: gray;
    color:black;
  }
  .yellow{
    background-color: yellow;
    color:black;
  }
  .black{
    background-color: blue;
    color:white;
  }
  .result{
    height: 40px;
    line-height: 40px;
    padding-top: 60px;
    padding-right: 40px;
    padding-bottom: 10px;
    text-align: right;
  }
  .button1,.button2{
    padding:2%;
    width:17%;
    margin:2%;
    height:17%;
    border-radius: 100px;
    float:left;
    text-align: center;
  }
  .row::after{
    content:"";
    height:0;
    line-height:0;
    display:block;
    clear:both;
    visibility:hidden;
  }
  .button2{
    width:42%;
  }
  </style>
<head>
<body>
<div class="container">
  <div class = "result">0</div>
  <div class = "func">
    <div class="row">
      <div class ="button1 gray">C</div>
      <div class ="button1 gray">+/-</div>
      <div class ="button1 gray">%</div>
      <div class ="button1 yellow">/</div>
    </div>
    <div class="row">
      <div class ="button1 black">7</div>
      <div class ="button1 black">8</div>
      <div class ="button1 black">9</div>
      <div class ="button1 yellow">*</div>
    </div>
    <div class="row">
      <div class ="button1 black">4</div>
      <div class ="button1 black">5</div>
      <div class ="button1 black">6</div>
      <div class ="button1 yellow">-</div>
    </div>
    <div class="row">
      <div class ="button1 black">1</div>
      <div class ="button1 black">2</div>
      <div class ="button1 black">3</div>
      <div class ="button1 yellow">+</div>
    </div>
    <div class="row">
      <div class ="button2 black">0</div>
      <div class ="button1 black">.</div>
      <div class ="button1 yellow">=</div>
    </div>
  </div>
</div>
<script>
  var buttons = document.querySelectorAll(".row>div");
  var result = document.querySelector('.result');
  /*
  str 显示字符串
  arr 缓存待计算的操作数组，＋或者－
  temp 临时数据
  flag 用于判断是否立即计算，用于正负号、百分比、小数点、数字的连续输入、乘法、除法等操作的判断,其他操作缓存到数组中
  */
  var str="",arr=[],temp=0,flag="";
  document.querySelector('.func').addEventListener("click",function(e){
    var srcElement = e.srcElement;
    var num = srcElement.innerText;
    if(num=="C"){
      flag=num;
      str="0";
      arr=[];
    }else if(num=="="){
      flag=num;
      str=getValue();
    }else if(num=="+/-"){
      flag=num;
      str=parseFloat(arr[arr.length-1]);
      if(isNaN(str)){
        str="Err";
        arr=[];
      }else{
        str=-str;
        arr[arr.length-1]=str;
      }
    }else if(num=="%"){
      flag=num;
      str=parseFloat(arr[arr.length-1]);
      if(isNaN(str)){
        str="Err";
        arr=[];
      }else{
        str=str/100;
        arr[arr.length-1]=str;
      }
    }else if(num=="*"||num=="/"){
        flag=num;
    }else if(num=="+"||num=="-"){
        flag=num;
        arr.push(num);
    }else if(num=="."){
        temp=arr[arr.length-1]+num;
        arr[arr.length-1]=temp;
        str=temp;
    }else{
      str=parseFloat(num);
      if(isNaN(str)){
        str="Err";
        arr=[];
      }else{
        if(flag=="*"){
          flag="";
          temp = arr[arr.length-1]*str;
          arr[arr.length-1]=temp;
          str=temp;
        }else if(flag=="/"){
          flag="";
          temp = arr[arr.length-1]/str;
          arr[arr.length-1]=temp;
          str=temp;
        }
        else{
          //若无操作打断，判断为数字连续输入
          if(flag==""){
            if(arr.length>0){
              temp=arr[arr.length-1]+""+str;
              arr[arr.length-1]=temp;
              str=temp;
            }else{
              arr.push(str);
            }
          }else{
            //若已经输入数字，置标识位为空
            flag="";
            arr.push(str);
          }
        }
      }
    }
    result.innerText=str;
  },false);
  function getValue(){
    var result=0,flag="";
    for(var i=0;i<arr.length;i++){
      var str = parseFloat(arr[i]);
      if(!isNaN(str)){
        if(flag=="+"){
          flag="";
          result+= str;
        }else if(flag=="-"){
          flag="";
          result-= str;
        }else{
          result=str;
        }
      }else if(arr[i]=="+"){
        flag="+";
      }else if(arr[i]=="-"){
        flag="-";
      }
    }
    return result;
  }
</script>
</body>
</html>
相关标签： 基础计算器

上一篇： Redis 集成Spring的示例代码（spring-data-redis）

下一篇：

推荐阅读