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.