Question

我正在创建一个具有当前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的百分比调整条宽。在这种情况下，它的maxXP。它不起作用，我也不知道为什么。

Answer 1

我尝试了解您的需求，然后创建了以下jsFiddle demo。我希望它包含你想要的核心。

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

Javascript Level / XP栏无法正常工作？

1 个答案: