Увеличивайте и уменьшайте переменную, пока число не будет достигнуто в JavaScript

Question

как я могу увеличивать и уменьшать переменную в javascript до 100, а когда достигается 100, она должна начать уменьшаться.

Таким образом, precisionBarValue должен начинаться с 0, увеличиваться до 100, а когда достигается 100, он должен идтидо 0, а затем повторите процедуру.

Это с интервалами 10.

Я использую это в очень простой игре JS, где это значение используется для увеличения и уменьшения PowerBar.

Заранее спасибо.

Answer 1

Вот еще один пример:

var up = true;
var value = 0;
var increment = 10;
var ceiling = 100;

function PerformCalc() {
  if (up == true && value <= ceiling) {
    value += increment

    if (value == ceiling) {
      up = false;
    }
  } else {
      up = false
      value -= increment;

      if (value == 0) {
        up = true;
      }
  }

  document.getElementById('counter').innerHTML = 'Value: ' + value + '<br />';
}
setInterval(PerformCalc, 1000);

<div id="counter"></div>

Answer 2

for (var i=0;i<100;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
while (i>0)
{
    i -= 10;
    document.write("The number is " + i);
    document.write("<br />");
}

Вы можете проверить и изменить его здесь .

Answer 3

Использование длительности и частоты кадров.

Еще один подход, позволяющий указать длительность и частоту кадров. Очень полезно для анимации и вещей, которые происходят в течение определенного периода времени.

HTML

<h2>Increment Value over a Duration with a given framerate</h2>
Value: <span id="value">0</span>

JavaScript

var valueElement = document.getElementById('value');

var start     = 0;
var end       = 100;
var duration  = 10000; // In milliseconds (divide by 1000 to get seconds).
var framerate = 50;    // In milliseconds (divide by 1000 to get seconds).

var toAdd = ( ( end - start ) * framerate ) / duration;

var interval = setInterval(function() {
    var currentValue = parseFloat(valueElement.innerHTML);

  if (currentValue >= end) {
      clearInterval(interval);
    return;
  }

    valueElement.innerHTML = (!isNaN(currentValue) == true ? currentValue + toAdd : toAdd);
}, framerate);

JSFiddle

https://jsfiddle.net/joshuapinter/8uasm7ko/

Я хотел отобразить инкрементное значение, но вы также можете легко обернуть его в общую функцию.

Answer 4

var i = 0;
while( i < 100 )
{
    i++;
}

while( i > -1 )
{
    i--;
}

Вы также можете выполнять другой код в циклах while, очевидно.