根据经过的时间更新变量

Question

我目前有以下代码：

<div id="resource1"></div>
<div id="resource2"></div>
<div id="resource3"></div>


<script>

var resource1 = 50;
var resource2 = 50;
var resource3 = 50;

var modifier = 3;

function resourcesupdates() {
    setInterval(function() {
            resource1 = resource1 + modifier;
            resource2 = resource2 + modifier;
            resource3 = resource3 + modifier;
            document.getElementById('resource1').innerText = resource1;
            document.getElementById('resource2').innerText = resource2;
            document.getElementById('resource3').innerText = resource3;

            console.log(resource1);

     }, 1000);
}

resourcesupdates();
</script>

此代码有效，因为每秒钟资源都会以每秒 3 次的速度更新。

如果我想让它以每分钟 47 次的速度更新，但我希望它仅在资源更新为整数而不是每秒时输出给用户，因为这会导致十进制值?

Answer 1

正如我在上面的评论中所说：问题是，当以每秒 47/60 的速度更新时，您可能永远不会达到数字没有小数位的地步。如果在数字总是四舍五入以显示时它仍然满足您的要求，这可能是您的解决方案：

var resource1 = 50;
var resource2 = 50;
var resource3 = 50;

var modifier = 47; // per minute

function resourcesupdates() {
    setInterval(function() {
            resource1 = resource1 + modifier/60;
            resource2 = resource2 + modifier/60;
            resource3 = resource3 + modifier/60;
                        
            document.getElementById('resource1').innerText = Math.round(resource1);
            document.getElementById('resource2').innerText = Math.round(resource2);
            document.getElementById('resource3').innerText = Math.round(resource3);
     }, 1000);
}

resourcesupdates();

<div id="resource1"></div>
<div id="resource2"></div>
<div id="resource3"></div>

如果您想始终按照您对另一个问题的评论中的要求进行四舍五入，只需将 Math.round() 替换为 Math.floor()。

Answer 2

更新答案

<div id="resource1"></div>
<div id="resource2"></div>
<div id="resource3"></div>


<script>

var resource1 = 50;
var resource2 = 50;
var resource3 = 50;

var modifier = 47/60;


function resourcesupdates() {
    document.getElementById('resource1').innerText = resource1;
    document.getElementById('resource2').innerText = resource2;
    document.getElementById('resource3').innerText = resource3;
    setInterval(function() {
            resource1 = resource1 + modifier;
            resource2 = resource2 + modifier;
            resource3 = resource3 + modifier;
            if (Number.isInteger(resource1) ) {
                document.getElementById('resource1').innerText = resource1;
            }
            if (Number.isInteger(resource2) ) {
                document.getElementById('resource2').innerText = resource2;
            }
            if (Number.isInteger(resource3) ) {
              document.getElementById('resource3').innerText = resource3;
                        }
            console.log(resource1);

     }, 1000);
}

resourcesupdates()
</script>

这里是 jsFiddle：https://jsfiddle.net/jamesbr139/jf0e3b6u/ 只是还没有看到它更新了一个整数......