Javascript级别/XP栏不能正常工作

Javascript Level/XP bar not working properly?

本文关键字：常工作 工作 不能 级别 XP Javascript      更新时间：2023-09-26

我正在制作一个具有当前XP值和最大XP值的XP条，并提出了一个脚本来运行它。这是我的标记:

<div class="meter">
    <span id="XP" style="width:0px">
        <div id="level"></div>
    </span>
</div>
下面是我的脚本: 
var currentXP=0;
var maxXP=745;
var gainXP=5;
var level=1;
percentage = (currentXP / maxXP) * 100;
document.getElementById("XP").style.width = percentage;
document.getElementById("level").innerHTML="Level : " + level;
function XPBar() {
    if (currentXP != maxXP) {
        currentXP += gainXP;
        document.getElementById("XP").style.width = percentage;
    }
    if (currentXP == maxXP) {
        currentXP -= maxXP;
        currentXP += gainXP;
        level++;
        document.getElementById("level").innerHTML="Level : " + level;
        Orbs+=1;
        document.getElementById("XP").style.width = percentage;
    }
}

主要是根据所需xp的百分比调整条形条宽度。在本例中，它是maxp。

我试图理解您想要什么，然后创建了以下jsFiddle演示。我希望它包含了你想要的核心。

我认为主要问题是缺少'%' indocument.getElementById("XP").style.width = percentage + '%';

相关文章：