Question

我在html和javascript中都有这段代码。

我想增加"#field"中显示的值，使其在达到10值后从0开始（而不是显示11，它从0开始）。

与这种情况相同，如果值小于0，我希望它从10开始。

谢谢。

 var value = 0;

/*Add function*/
function add() {
    value++;
    document.getElementById("field").innerHTML = value;
}

/*minus function*/
function minus() {
    value--;
    document.getElementById("field").innerHTML = value;
}

/*condition to start over from 0*/
if(value>10){
    value = 0;
    document.getElementById("field").innerHTML = value;
}

<form>
        <input type="button" value="+" onclick="add();"/>
        <input type="button" value="-" onclick="minus();"/>
</form>
         <span id="field">0</span>

Answer 1

使用条件来验证要显示的值的值。如果该值大于10，则将其重置为0，反之亦然。

var value = 0;

/*Add function*/
function add() {
  if(value==10){ //Condition 1
     value = -1;
  }
  value++;
  document.getElementById("field").innerHTML = value;
}

/*minus function*/
function minus() {
  if(value == 0){ //Condition 2
     value = 11;
  }
  value--;
  document.getElementById("field").innerHTML = value;
}

<form>
    <input type="button" value="+" onclick="add();"/>
    <input type="button" value="-" onclick="minus();"/>
</form>
<span id="field">0</span>

Answer 2

只需在add()函数中检查该值是否大于或等于10，如果是，则将其设置为0，然后在minus()函数中检查该值是否小于或等于10。 0，如果是，则将其设置为10。

var value = 0;

/*Add function*/
function add() {
    if(value>=10){
      value = 0;
    } else {
    value++;
    }
    document.getElementById("field").innerHTML = value;
}

/*minus function*/
function minus() {
    if(value<=0){
       value = 10;
    } else {
    value--;
    }
    document.getElementById("field").innerHTML = value;
}

/*condition to start over from 0*/
if(value>10){
    value = 0;
    document.getElementById("field").innerHTML = value;
}

<form>
        <input type="button" value="+" onclick="add();"/>
        <input type="button" value="-" onclick="minus();"/>
</form>
         <span id="field">0</span>

Answer 3

说明：

add()检查值是否小于10，如果true则增加值。一旦达到10，则此条件块将为false并设置为value = 0

minus()的检查值大于0，如果true则减小该值。一旦达到0，则此块将为false并设置value = 10

以下是+和-两个按钮的工作代码：

var value = 0;

/*Add function*/
function add() {
  if (value < 10) {
    value++;
  } else {
    value = 0;
  }
  document.getElementById("field").innerHTML = value;
}

/*minus function*/
function minus() {
  if (value > 0) {
    value--;
  } else {
    value = 10;
  }
  document.getElementById("field").innerHTML = value;
}

<form>
  <input type="button" value="+" onclick="add();" />
  <input type="button" value="-" onclick="minus();" />
</form>
<span id="field">0</span>

Answer 4

我通过将条件放在一个单独的函数中来做到这一点，我不得不从另外两个函数中调用它。

 var value = 0;

/*Add function*/
function add() {
    value++;
    document.getElementById("field").innerHTML = value;
    cdn();
}

/*minus function*/
function minus() {
    value--;
    document.getElementById("field").innerHTML = value;
    cdn();
}

/*condition to start over from 0*/
function cdn(){
    if(value>10){
        value = 0;
        document.getElementById("field").innerHTML = value;
    }

    if(value<0){
        value = 10;
        document.getElementById("field").innerHTML = value;
    }
}

<form>
        <input type="button" value="+" onclick="add();"/>
        <input type="button" value="-" onclick="minus();"/>
</form>
         <span id="field">0</span>

Answer 5

有很多方法可以解决您的问题。一种方法是像其他答案中所述，将支票作为增量（加）和减（减）功能的一部分。这些是非常好的解决方案，应在实践中使用，因为它们有效（1）有效，并且（2）易于理解。

但是，这是一个很好的机会来展示模数运算符%的美。模数为您提供除法运算的余数，因此5 % 3 = 2或5除以3会使您剩下2。这是一个great explanation，它会更深入，但只要我们了解它的作用就是我们剩下的，我们应该没事。

模算术对于循环遍历值的环非常有用，例如您的数字0-10，然后回到0。我们将看到有多快，但是首先让我们看一下其他一些解决方案。假设您的计数器从9开始，您使用增量函数

function add() { value++; };

两次调用add之后，您将在11点，就像看到代码一样。

因此，您编写了更好的功能，

function add_checked() { 
    if (value < 10) {  // handle cases 0-9
        value++; 
    } else {
        value = 0;  // handle case 10
    }
};

这可以解决您的问题，但是有点丑陋。您可以使用ternary operators（例如，单行if）将if语句压缩为一行，如下所示：

function add_checked_ternary() { value = (value < 10) ? (value + 1) : 0; };

这大致翻译为（1）检查value是否小于10，（2）如果小于10，则使用值value + 1，（3）否则使用值0，（4）将value设置为您使用的任何值。一样复杂。

Modulo让我们避免了这种分支逻辑。试用功能

function add_limited() { value = (value + 1) % 11; };

当value = 9时，add_limited将加1，然后将余数取模11。由于不能将10分为11个部分，因此10 % 11 = 10的值为10。我们再次调用add_limited，我们加1并取余数。 11可以精确地被11分解，因此我们没有余数11 % 11 = 0。这使得值从0代替11。除了10之外，所有值都像平时一样添加1，因为它们都保持小于11。10循环完全返回0，完全符合需要！

现在，即使我们想庆祝是因为我们做了一些真的很酷的事情，但还有另外一件事情要考虑：消极的一面。就像您的递增函数在大于10时需要换行一样，您的递减函数在小于0时也需要换行。让我们从value = 1开始，跳到minus_checked。

function minus_checked() { 
    if (value > 0) {  // handle cases 1-10
        value--; 
    } else {
        value = 10;  // handle case 0
    }
};

当value > 0时，它会照常递减，而当value = 0时，它会四处循环。让我们尝试制作一个模数版本（我们将minus_checked_ternary留给读者）。

function minus_limited_broken() { value = (value - 1) % 11; };

您可能已经猜到，此版本已损坏，就像value = 0，-1 % 11 = -1一样。不幸的是，javascript余数不会像google calculator does那样将负数转换为正数。但是我们可以手动完成。假设我们在答案中添加了11。然后0将变为10而不是-1，但是1将是11而不是0，2将是12而不是1，依此类推，直到10将是20而不是9。这不是我们想要的，但是请注意10 % 11 = 10，11 % 11 = 0，12 % 11 = 1，依此类推，直到20 % 11 = 9。这些都是我们想要的数字，因此我们可以构建minus_limited：

function minus_limited_v1() { value = (value - 1 + 11) % 11; };

或

function minus_limited() { value = (value + 10) % 11; };

谁曾想到您可以通过加数字来进行减法？无论哪种方式，模都是创建环绕逻辑的好方法。最后一件事，因为我们只加或减1，所以这些函数的更好称呼是递增和递减，或inc和dec。

超过10后获得等于0的数字值

5 个答案: