计数器从2开始而不是从1开始

时间:2019-04-09 18:02:52

标签: javascript css html5

在以下代码段中,按下“-”按钮会使等号左侧的数字递减计数,直至达到0,从而使它和加号消失。如果再按“ +”按钮,则加号和左数字返回,但是数字从2开始而不是1。为什么数字不是从1开始?这不是重复计算,因为随后每次按“ +”按钮都会使数字增加1,而不是2。

function leftMinusButton() {
  var valvariable = (parseInt(document.getElementById("variable").style.top, 10) || 120) - 5;
  document.getElementById("variable").style.top = valvariable +  "px";
  
  var valplus = (parseInt(document.getElementById("plus").style.top, 10) || 120) - 5;
  document.getElementById("plus").style.top = valplus +  "px";
  
  var valleftnum = (parseInt(document.getElementById("leftnum").style.top, 10) || 120) - 5;
  document.getElementById("leftnum").style.top = valleftnum +  "px";

  var valrightnum = (parseInt(document.getElementById("rightnum").style.top, 10) || 120) + 5;
  document.getElementById("rightnum").style.top = valrightnum +  "px";
}

function leftPlusButton() {
  var valvariable = (parseInt(document.getElementById("variable").style.top, 10) || 30) + 5;
  document.getElementById("variable").style.top = valvariable +  "px";
  
  var valplus = (parseInt(document.getElementById("plus").style.top, 10) || 30) + 5;
  document.getElementById("plus").style.top = valplus +  "px";
  
  var valleftnum = (parseInt(document.getElementById("leftnum").style.top, 10) || 30) + 5;
  document.getElementById("leftnum").style.top = valleftnum +  "px";
  
  var valrightnum = (parseInt(document.getElementById("rightnum").style.top, 10) || 30) - 5;
  document.getElementById("rightnum").style.top = valrightnum +  "px";
  }

  
function leftCountDown() {  
  var i = document.getElementById("leftnum");
  var value = parseInt(i.innerHTML);
  if (value > 0) {
    value--;
  }  
  i.innerHTML = value;

  if (value <= 0) {  
  document.getElementById("plus").style.display="none";
  document.getElementById("leftnum").style.display="none";
  }
}

function leftCountUp() {
  var i = document.getElementById("leftnum");
  var value = parseInt(i.innerHTML);
  if (value <= 0) {
    value++;
  }

  if (value > 0) {
    document.getElementById("plus").style.display="block";
    document.getElementById("leftnum").style.display="block";
    value++;
  }

  i.innerHTML = value;
}
body {
  font-family: arial,"times new roman";
  background: lightblue;
  color: black;
  text-align: center;
  }
    
.leftminus {
  position: absolute;
  top: 60px;
  left: 30px;
  width: 50px;
  height: 50px;
  font-size: 40px;
  }

.leftplus {
  position: absolute;
  top: 170px;
  left: 30px;
  width: 50px;
  height: 50px;
  font-size: 40px;
  }
    
.variable {
  position: absolute;
  top: 120px;
  left: 115px;
  font-size: 40px;
  }
    
.plus {
  position: absolute;
  top: 120px;
  left: 175px;
  font-size: 40px;
  }
    
.leftnum {
  position: absolute;
  top: 120px;
  left: 240px;
  font-size: 40px;
  }
    
.equals {
  position: absolute;
  top: 120px;
  left: 300px;
  font-size: 40px;
  }
   
.rightnum {
  position: absolute;
  top: 120px;
  left: 350px;
  font-size: 40px;
  }
  <div id="workspace">
      <div class="variable" id="variable">x</div>
      <div class="plus" id="plus">+</div>
      <div class="leftnum" id="leftnum">7</div>
      <div class="equals" id="equals">=</div>
      <div class="rightnum" id="rightnum">19</div>
  </div>

  <div id="plusminus">
    <button type="button" class="leftminus" id="leftminus" onclick="leftMinusButton(); leftCountDown();">-</button>
    <button type="button" class="leftplus" id="leftplus" onclick="leftPlusButton(); leftCountUp()">+</button>
  </div>  

2 个答案:

答案 0 :(得分:2)

function leftCountUp() {
  var i = document.getElementById("leftnum");
  var value = parseInt(i.innerHTML);
  if (value <= 0) {
    value++;
  }

  if (value > 0) {
    document.getElementById("plus").style.display="block";
    document.getElementById("leftnum").style.display="block";
    value++;
  }

  i.innerHTML = value;
}

您要增加两次值-起始值为零-一次增加。然后,值是1,因此如果是,则输入第二个值。 将if (value > 0)更改为else,应该没问题

编辑:或者按照epascarello的建议进行更改。取决于您要实现的目标

答案 1 :(得分:1)

您的逻辑正在这样做

if (value <= 0) {
  value++;  // <-- Adds one to zero to make one
}

if (value > 0) {
  ...
  value++;  // <-- Adds one to one to make  two
}

首先应该是

if (value < 0) {
  value = 0
}