javascript - 如何防止历史记录在计算器中消失

标签 javascript jquery html css

我正在构建一个 FreeCodeCamp 计算器。快结束了。我只需要完善几件事。然而，困扰我的主要问题是为什么当我按下数字时历史区域消失了......

我尝试以一种方式编写计算器，即一个人按下多个数字，然后按下“x”、“+”等运算符，已输入的数字将向下移动到历史区域。我注意到当我点击多个数字时，零会消失。当我点击小数点“.”时也是如此。在小数的情况下，在第一种情况下，如果我按“。”，零不会消失，但随后我按一个数字，零就会消失。在第二种情况下，如果我先按一个数字，然后按一个小数点，零就会消失。

我该如何解决？

这是我的代码:

$(document).ready(function() {
  
  var mainMath = "0";
  var subMath = "0";
  var reset = "";
  update();
  
  $("button").click(function(){
    calculate($(this).attr("value"));
  });
  
  function calculate(keyitem) {
    switch(keyitem) {
      case "clear":
        clearScreen();
        break;
      case "plusminus":
        plusminusScreen();
        break;
      case "%":
        percentageScreen();
        break;
      case "/":
      case "*":
      case "+":
      case "-":
        addOperator(keyitem);
        break;
      case "0":
      case "1":
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
      case "7":
      case "8":
      case "9":
        addNumber(keyitem);
        break;
      case ".":
        addDecimal(keyitem);
        break;
      case "=":
        solveEqual();
        break;
    }
    update();
    };
 
  function clearScreen() {
     mainMath = "0";
     subMath = "0";
  };
  
  function plusminusScreen() {
     mainMath = -1 * mainMath;
  };
  
  function addNumber(keyitem) {
    /*if (keyitem == "."){
      if(mainMath == "0") {
        mainMath = "0" + keyitem;
        return;
      } 
    }*/
    if (mainMath == "0"){
      mainMath = keyitem;
      return;
    }
    if (subMath == "0") {
      subMath = "";
    }
    mainMath+=keyitem;
  };
  
  function addOperator(keyitem){
    if(mainMath == "0"){
    subMath += "0";
    }
    addNumber(keyitem);
    subMath += mainMath;
    mainMath = "0";
  };
  
  function addDecimal(keyitem){
    if (keyitem == "."){
      if(mainMath == "0") {
        mainMath = "0" + keyitem;
        subMath = "0";
        return;
      } 
    }
    addNumber(keyitem);
  };
  
  function solveEqual() {
    mainMath = eval(subMath+mainMath);
  };
  
  function update(){
  $("#answer").html(mainMath);
  $("#history").html(subMath);
};
  
  
});
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
h1, h2, h3, p {
  font-family: 'Roboto', sans-serif;
}
html, body{
  height:100%;
  margin: 0;
  background-color: #ffffff;
}
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-repeat: no-repeat;
    background-size: cover;
  background-position: center center;
  padding: 160px 0;
}
.calculatorbox {
  width: 260px;
  margin: 0 auto;
  border: 1px solid #000000;
}
.calheader {
  text-align: center;
}
.calwindow {
  background: #000000;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
   -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  padding: 10px 0;
  box-sizing: border-box;
}
.entry {
  font-size: 4em;
  display: block;
  line-height: 1em;
}
.entryhistory {
  font-size: 1em;
  padding-right: 5px;
}
.entry p, .entryhistory p {
  margin: 0;
  color: #ffffff;
}
sup {
  top: -0.5em;
}
 
sub {
  bottom: -0em;
}
.row {
  clear: both;
  width: 100%;
  display: flex;
}
button {
  display: inline-block;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
}
.key {
  width: 65px;
  height: 60px;
  font-size: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}
.key.btnspan {
  width: 130px;
}
.key.topcolor {
  background: #d9d9d9;
}
.key.orange {
  background: #ff8c00;
  color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="calheader">
      <h2>Simple Calculator</h2>
    </div>
  <div class="calculatorbox">
    <div class="calwindow">
      <!-- ENTRY BOX -->
      <div class="entry">
        <p id="answer">0</p>
      </div>
      <div class="entryhistory">
        <p id="history">0</p>
      </div>
    </div>
    <!-- BUTTONS -->
    <div class="calbuttons">
      <div class="row">
        <button class="key topcolor" value="clear">C</button>
        <button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button>
        <button class="key topcolor" value="%">%</button>
        <button class="key orange" value="/">÷</button>
      </div>
      <div class="row">
        <button class="key" value="7">7</button>
        <button class="key" value="8">8</button>
        <button class="key" value="9">9</button>
        <button class="key orange" value="*">×</button>
      </div>
      <div class="row">
        <button class="key" value="4">4</button>
        <button class="key" value="5">5</button>
        <button class="key" value="6">6</button>
        <button class="key orange" value="-">−</button>
      </div>
      <div class="row">
        <button class="key" value="1">1</button>
        <button class="key" value="2">2</button>
        <button class="key" value="3">3</button>
        <button class="key orange" value="+">+</button>
      </div>
      <div class="row">
        <button class="key btnspan" value="0">0</button>
        <button class="key" value=".">.</button>
        <button class="key orange" value="=">=</button>
      </div>
    </div>
  </div>
</div>

最佳答案

我解决了这个零问题!

这是我移动此代码的解决方案:

if(subMath == "0"){
      subMath = "";
    }

到函数addOperator();

$(document).ready(function() {
  
  var mainMath = "0";
  var subMath = "0";
  var finalset = "";
  var finalresult = "";
  update();
  
  $("button").click(function(){
    calculate($(this).attr("value"));
  });
  
  function calculate(keyitem) {
    switch(keyitem) {
      case "clear":
        clearScreen();
        break;
      case "plusminus":
        plusminusScreen();
        break;
      case "%":
        percentageScreen();
        break;
      case "/":
      case "*":
      case "+":
      case "-":
        addOperator(keyitem);
        break;
      case "0":
      case "1":
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
      case "7":
      case "8":
      case "9":
        addNumber(keyitem);
        break;
      case ".":
        addDecimal(keyitem);
        break;
      case "=":
        solveEqual();
        break;
    }
    update();
    };
 
  function clearScreen() {
     mainMath = "0";
     subMath = "0";
  };
  
  function plusminusScreen() {
     mainMath = -1 * mainMath;
  };
  
  function addNumber(keyitem) {
    if (mainMath == "0"){
      mainMath = keyitem;
      finalset = mainMath;
      return;
    }
    /*if (subMath == "0") {
      subMath = "";
    }*/
    /*subMath = subMath.replace("0",keyitem)*/
    mainMath+=keyitem;
  };
  
  function addOperator(keyitem){
    if(mainMath == "0"){
      subMath += "0";
    }
    if(subMath == "0"){
      subMath = "";
    }
    addNumber(keyitem);
    subMath += mainMath;
    mainMath = "0";
  };
  
  function addDecimal(keyitem){
    if (keyitem == "."){
      if(mainMath == "0") {
        mainMath = "0" + keyitem;
        subMath = "0";
        return;
      } 
    }
    addNumber(keyitem);
  };
  
  function solveEqual() {
    mainMath = eval(subMath+mainMath);
    subMath += finalset;
  };
  
  function update(){
  $("#answer").html(mainMath);
  $("#history").html(subMath);
};
  
  
});
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
h1, h2, h3, p {
  font-family: 'Roboto', sans-serif;
}
html, body{
  height:100%;
  margin: 0;
  background-color: #ffffff;
}
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-repeat: no-repeat;
    background-size: cover;
  background-position: center center;
  padding: 160px 0;
}
.calculatorbox {
  width: 260px;
  margin: 0 auto;
  border: 1px solid #000000;
}
.calheader {
  text-align: center;
}
.calwindow {
  background: #000000;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
   -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  padding: 10px 0;
  box-sizing: border-box;
}
.entry {
  font-size: 4em;
  display: block;
  line-height: 1em;
}
.entryhistory {
  font-size: 1em;
  padding-right: 5px;
}
.entry p, .entryhistory p {
  margin: 0;
  color: #ffffff;
}
sup {
  top: -0.5em;
}
 
sub {
  bottom: -0em;
}
.row {
  clear: both;
  width: 100%;
  display: flex;
}
button {
  display: inline-block;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
}
.key {
  width: 65px;
  height: 60px;
  font-size: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}
.key.btnspan {
  width: 130px;
}
.key.topcolor {
  background: #d9d9d9;
}
.key.orange {
  background: #ff8c00;
  color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="calheader">
      <h2>Simple Calculator</h2>
    </div>
  <div class="calculatorbox">
    <div class="calwindow">
      <!-- ENTRY BOX -->
      <div class="entry">
        <p id="answer"></p>
      </div>
      <div class="entryhistory">
        <p id="history"></p>
      </div>
    </div>
    <!-- BUTTONS -->
    <div class="calbuttons">
      <div class="row">
        <button class="key topcolor" value="clear">C</button>
        <button class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button>
        <button class="key topcolor" value="%">%</button>
        <button class="key orange" value="/">÷</button>
      </div>
      <div class="row">
        <button class="key" value="7">7</button>
        <button class="key" value="8">8</button>
        <button class="key" value="9">9</button>
        <button class="key orange" value="*">×</button>
      </div>
      <div class="row">
        <button class="key" value="4">4</button>
        <button class="key" value="5">5</button>
        <button class="key" value="6">6</button>
        <button class="key orange" value="-">−</button>
      </div>
      <div class="row">
        <button class="key" value="1">1</button>
        <button class="key" value="2">2</button>
        <button class="key" value="3">3</button>
        <button class="key orange" value="+">+</button>
      </div>
      <div class="row">
        <button class="key btnspan" value="0">0</button>
        <button class="key" value=".">.</button>
        <button class="key orange" value="=">=</button>
      </div>
    </div>
  </div>
</div>

关于javascript - 如何防止历史记录在计算器中消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47081417/

上一篇：jQuery 选择的样式

下一篇：javascript - Margin-top 和 Margin-bottom 不适用于内部元素

相关文章：

jquery - 用jquery检查div是否存在

html - 自定义虚线边框。

javascript - Google map 在页面加载时未初始化

javascript - 隐藏 jQuery DataTables 中的列时出现性能问题

javascript - 根据单选按钮选择显示/隐藏 div

javascript - 显示 [object HTMLDivElement] 的内容

javascript - 为什么我们需要返回一个 promise 解析？

javascript - Parse.com 是否允许在关系查询中包含指针？

javascript - Nodejs/Javascript 获取任何进程的进程内存

javascript - 单击复选框+按钮后动态更改 slider 值

©2024 IT工具网  联系我们