增加和减少一个变量，直到在 Javascript 中达到一个数字

Question

如何在 Javascript 中增加和减少变量直到 100，当达到 100 时它应该开始减少。

所以accuracyBarValue应该从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

代码

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

解构

1. i+=10 → i在每个刻度上无限增加 10
2. %100 → 最大值两倍的模数（除法剩余，例如10 % 6 = 4 ）
3. - 100 → 删除范围（因此数字将始终在 100 和 -100 之间，否则将在 0 和 6 之间）
4. Math.abs() → 删除 -（确保数字从 0 移动到 100 并返回）

步骤可视化

我++

∞       .
       .
      .
     /
    /
   / 
  /
0

(i+=10)%200

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

i++%200-100

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

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

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

实现示例

 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)) ) }

替代方法（基于浮动）

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

或者

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

其中i是0 - Infinity之间的float 。 结果也是一个float ，需要乘以最大值并四舍五入（目标值）。

Answer 4

使用持续时间和帧速率。

另一种允许您指定持续时间和帧速率的方法。 对于动画和一段时间内发生的事情非常有用。

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 5

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

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

显然，您还可以在while循环中执行其他代码。