需要帮助添加最大和最小值到计数器

Question

我想做一个从0开始到12结束的计数器，我现在有一个无法封顶的计数器。所以基本上，我在设置最大和最小值时遇到了麻烦。这是我的代码。

<div class="counter8">
  <label id="blank"></label>
  <div class="operations">
    <a href="javascript:void(0)" onclick="dec_num8()" class="dec opr8">⇦</a>
    <span class="count8">0</span>
    <a href="javascript:void(0)" onclick="inc_num8()" class="inc opr8">⇨</a>
  </div>
</div>

<script>
var add=document.querySelector(".inc");
var sub=document.querySelector(".dec");
let counter8=document.querySelector(".count8");



function inc_num8(){
  var temp8=parseInt(counter8.innerText) >> 0;
  counter8.innerText=temp8+1;
  if (temp8 > 12) {
    counter8.value = 12;
  } else {
    counter8.value = temp8;
  }
}
function dec_num8(){
  var temp8=parseInt(counter8.innerText) >> 0;
  counter8.innerText=temp8-1;
}
</script>

我曾尝试用增加按钮来实现这个功能，但失败了。

Answer 1

你可以用 Math.max 和 Math.min 来封顶这些值。

<div class="counter8">
  <label id="blank"></label>
  <div class="operations">
    <a href="javascript:void(0)" onclick="dec_num8()" class="dec opr8">⇦</a>
    <span class="count8">0</span>
    <a href="javascript:void(0)" onclick="inc_num8()" class="inc opr8">⇨</a>
  </div>
</div>

<script>
var add=document.querySelector(".inc");
var sub=document.querySelector(".dec");
let counter8=document.querySelector(".count8");



function inc_num8(){
  var temp8=parseInt(counter8.innerText) >> 0;
  counter8.innerText=Math.min(12,temp8+1);
}
function dec_num8(){
  var temp8=parseInt(counter8.innerText) >> 0;
  counter8.innerText=Math.max(0,temp8-1);
}
</script>

如果你想用if分支来修正你的代码，你可以这样做。

if (temp8 >= 12) {
  temp8 = 12;
} else {
  temp8++;
}
counter8.innerText=temp8;

或者在一行上: temp8 = temp8 >= 12 ? temp8 : temp8+1 对于最小值，只需要一个翻转的版本。

Answer 2

你并没有真正限制你的减法按钮上的最小计数器。而且你只有在检查条件后才会递增它，所以对于你的例子。

function inc_num8(){
  var temp8=parseInt(counter8.innerText) >> 0;

  if (temp8 >= 12) { // here changed to >=
    counter8.innerText = 12; //also use innerText, not value
  } else {
    counter8.innerText=temp8+1;
  }
}
function dec_num8(){
  var temp8=parseInt(counter8.innerText) >> 0;
  if(temp8 <= 0){ //here changed to <=
  counter8.innerText = 0;
  }else{
  counter8.innerText=temp8-1;
  }
}