Javascript：计算余数不起作用？

Question

I'm working on a game where the player / enemy has a balance bar with 3 overlays. What i'm trying to do is manipulate the 1st overlay so it goes fully across the bar by percentages.

Example: first overlay is 50% of enemy's balance. Then moves into another 'phase' or 'state. Then that overlay is gone and the second overlay is triggered and starts to decrease as well.

The width of the bar is 200 pixels, so what i'm trying to do is say "hey, if 50% of the enemies balance is gone, THEN trigger/animate the 2nd overlay.

The problem i'm running into is the remainder line. When I hit the enemy for say.. 10 balance damage of 200. It will give me the proper percentage left AND the proper remainder left. But once I hit 50%, the remainder = 0! This is where that line or function no longer works properly and it breaks the design pattern of what I want to do. Here is a example in the console log.

balanceCounter: function (character, boss){
    var percentage = Math.floor((boss.balance/200) * 100)
    var remain = 100 % percentage; // <--- This is not working properly
    console.log(percentage);
    console.log(remain);
    if (character.virtue == "hero"){ 
        if (percentage > 49){
        $("#bossbalanceoverlay2").animate({
            width: percentage * 2 - (remain * 2)
            }, 200)
        }
        else 
            $("#bossbalanceoverlay1").animate({
            width: percentage * 2 - (remain * 2)
            }, 200); 
        }


**click attack button**
97 // <--- Percent
3 // <--- Remainder

**click attack button**
95 // <--- Percent
5 // <--- Remainder

**click attack button**
92 // <--- Percent
8 // <--- Remainder

(When i hit the 50% mark)

**click attack button**
50 // <--- Percent
0 // <--- Remainder  **Why 0?**

**click attack button**
47 // <--- Percent
6 // <--- Remainder  **Why 6 instead of 3?**

**click attack button**
45 // <--- Percent
10 // <--- Remainder **Why 10 instead of 5?**

Answer 1

You probably want to do this, instead of % :

var remain = 100 - percentage;

You want remain + percentage to always add up to 100, so this is a subtraction you need, not a modulo operation.

It is normal that with % (modulo) you get zero when the percentage is 50, because 100 is a multiple of 50 and so there is no remainder.

Answer 2

The problem your facing is that % returns the remainder.

100 % 45 => divisible by 45 twice, remainder = 10.

100 % 50 => divisible by 50 twice, remainder = 0.

What you want is remain = 100 - percentage

Answer 3

For starters I would add missing semicolons.

Secondly it looks like your else bracket is missing curly braces { }, which could cause both blocks to be hit depending on how your code is formatted.

Thirdly I would read up on the % operator, you may be overthinking it ;)