How can I increase and decrease a variable in Javascript until 100 and when 100 is reached it should start decreasing.

So accura开发者_StackOverflow社区cyBarValue should start in 0, increase to 100, and when 100 is reached it should go to 0, and then repeat procedure.

This in intervals of 10.

I use this in a very simple JS game, where this value is used to increase and decrease a PowerBar.

Here is another take on this:

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>

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 />");
}

You can test and modify it here.

Code

let i = 100;
setInterval(() => {
  console.log(Math.abs((i+=10)%200 - 100))
}, 1000);

Deconstruction

1. i+=10 → i gets indefinitely increased by 10 on every tick
2. %100 → modulo of double the max value (division remaining ex. 10 % 6 = 4)
3. - 100 → remove the range (so the numbers will always be between 100 and -100, otherwise it would be between 0 and 6)
4. Math.abs() → removes the - (Makes sure the number moves from 0 to 100 and back)

Steps Visualized

i++

∞       .
       .
      .
     /
    /
   / 
  /
0

(i+=10)%200

200 
     /    /    /    .
    /    /    /    .
   /    /    /    .
  /    /    /    /
 /    /    /    /
0

i++%200-100

100 
  \        /\        /\
   \      /  \      /  \
0   \    /    \    /    .
     \  /      \  /      .
      \/        \/        .
-100

Math.abs(i++%200-100)

100 
  \    /\    /.
   \  /  \  /  .
    \/    \/    .
0

Implementation Example

const max = 10;

let i = max;
const $body = document.querySelector('body');

setInterval(() => {
  const val = Math.abs(i++%(max * 2) - max);
  const $el = document.createElement('i');
  $el.style = `--i: ${i}; --val: ${val}`;
  $body.appendChild($el);
  window.scrollTo(window.innerWidth, 0);
  console.log(val);

}, 200);

i {
  --i: 0;
  --val: 0;
  --size: 10px;
  
  position: absolute;
  background: black;
  width: var(--size);
  height: var(--size); 
  top: var(--size);
  left: calc(-10 * var(--size));
  transform: translate(
    calc(var(--i) * var(--size)),
    calc(var(--val) * var(--size))
  )
}

Alternative Approaches (Float based)

Math.acos(Math.cos(i * Math.PI)) / Math.PI;

or

Math.abs(i - Math.floor(i) - .5);

Where i is a float between 0 - Infinity. Result is a float as well that needs to be multiplied by your max and rounded (target value).

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

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

You can also do other code in the while loops, obviously.

Using Duration and Frame Rate.

Another approach that allows you to specify the duration and frame rate. Highly useful for animations and things that happen over a period of time.

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/

I wanted to display the incremental value but you could easily wrap this up into a generic function as well.