[英]Increase and decrease a variable until a number is reached in Javascript
如何在 Javascript 中增加和減少變量直到 100,當達到 100 時它應該開始減少。
所以accuracyBarValue
應該從0開始,增加到100,當達到100時它應該去0,然后重復這個過程。
這以 10 為間隔。
我在一個非常簡單的 JS 游戲中使用它,該值用於增加和減少 PowerBar。
這是另一種看法:
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 />");
}
您可以在此處對其進行測試和修改。
代碼
let i = 100;
setInterval(() => {
console.log(Math.abs((i+=10)%200 - 100))
}, 1000);
解構
i+=10
→ i
在每個刻度上無限增加 10%100
→ 最大值兩倍的模數(除法剩余,例如10 % 6 = 4
)- 100
→ 刪除范圍(因此數字將始終在 100 和 -100 之間,否則將在 0 和 6 之間)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
,需要乘以最大值並四舍五入(目標值)。
另一種允許您指定持續時間和幀速率的方法。 對於動畫和一段時間內發生的事情非常有用。
<h2>Increment Value over a Duration with a given framerate</h2>
Value: <span id="value">0</span>
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);
https://jsfiddle.net/joshuapinter/8uasm7ko/
我想顯示增量值,但您也可以輕松地將其包裝為通用函數。
var i = 0;
while( i < 100 )
{
i++;
}
while( i > -1 )
{
i--;
}
顯然,您還可以在while
循環中執行其他代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.