我想对点击攻击按钮后慢慢消失的健康条进行可视化。不幸的是，我不知道如何将damage转换为healthBar长度的百分比来减少其长度。我希望它的长度减少，直到它完全消失。
我部分理解您需要获得offsetWidth等，但我不知道如何将其与damage变量相结合。
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset = 'utf-8'>
<title>HP</title>
<style>
.healthBar {
position: fixed;
width: 500px;
height: 20px;
background-color: red;
left: 50%;
transform: translateX(-50%);
}
.attack {
position: fixed;
width: 100px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="healthBar"></div>
<button class="attack">
ATTACK
</button>
<script type = "text/javascript">
const attack = document.querySelector('.attack');
const healthBar = document.querySelector('.healthBar');
let damage = 100;
let HP = 200;
attack.addEventListener('click', function(){
if (HP > 0) {
HP = HP - damage;
if (HP <= 0) {
console.log('DEAD');
alert('DEAD');
}
}
})
</script>
</body>
</html>
要获得某个值的百分比，请将当前值除以总值。在这种情况下，如果我有100点生命值并受到20点伤害，20/100就是0.2或20%。100%总是用数字1表示，所以你可以可靠地将这个值乘以100，得到一个对人眼更友好的百分比。
我继续努力，试图让它发挥作用，最终我做到了，所以让我解释一下我是如何得到解决方案的。
首先，让我们想出一个公式。由于您可以使用百分比来指定HTML元素的宽度，所以让我们来了解如何获得剩余运行状况的百分比。正如我之前所说，current/total给出了百分比，所以我们所需要做的就是得到这个值，并将其乘以100，使其成为一个合适的百分比。这个公式看起来有点像(HP / totalHP) * 100。很简单。
现在我们有了百分比，我们需要为健康条创建一个父元素来表示最大健康。为此，我将把您的条形图分成两个不同的元素，分别为类healthContainer和healthBar。healthContainer将是表示最大健康的父元素，而healthBar将是逐渐减少的实际彩色条。我还将为healthContainer添加一个边框，以便您可以看到差异。
最后，我们只需要跟踪最大健康度。我将创建第二个名为maxHP的变量，并将HP初始设置为它。这样，我们可以使用上面的公式来获得当前HP占最大HP的百分比，并将其作为宽度插入healthBar元素中。这是完整的代码：
let attack = document.querySelector('.attack');
let healthBar = document.querySelector('.healthBar');
let damage = 100;
let maxHP = 200;
let HP = maxHP;
attack.addEventListener('click', function() {
if (HP > 0) {
HP = HP - damage;
healthBar.style.width = ((HP / maxHP) * 100) + '%';
if (HP <= 0) {
console.log('DEAD');
alert('DEAD');
}
}
}).healthContainer {
position: fixed;
width: 500px;
height: 20px;
left: 50%;
transform: translateX(-50%);
border-style: solid;
border-width: 2px;
border-color: black;
}
.healthBar {
position: relative;
width: 100%;
height: 100%;
background-color: red;
}
.attack {
position: fixed;
width: 100px;
height: 20px;
cursor: pointer;
}<div class="healthContainer">
<div class="healthBar"></div>
</div>
<button class="attack">
ATTACK
</button>