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

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

效果如下:
[web效果实现-2]基础计算器实现_第1张图片
主要代码如下:


<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">0div>
  <div class = "func">
    <div class="row">
      <div class ="button1 gray">Cdiv>
      <div class ="button1 gray">+/-div>
      <div class ="button1 gray">%div>
      <div class ="button1 yellow">/div>
    div>
    <div class="row">
      <div class ="button1 black">7div>
      <div class ="button1 black">8div>
      <div class ="button1 black">9div>
      <div class ="button1 yellow">*div>
    div>
    <div class="row">
      <div class ="button1 black">4div>
      <div class ="button1 black">5div>
      <div class ="button1 black">6div>
      <div class ="button1 yellow">-div>
    div>
    <div class="row">
      <div class ="button1 black">1div>
      <div class ="button1 black">2div>
      <div class ="button1 black">3div>
      <div class ="button1 yellow">+div>
    div>
    <div class="row">
      <div class ="button2 black">0div>
      <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;ivar 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>

你可能感兴趣的:(web开发)