时间戳

首页 > 解决方案 > 我被困在这里用 hp bar 解决我的问题

javascript - 我被困在这里用 hp bar 解决我的问题

问题描述

所以我用js做一个hp bar，我做了一个3000/3000 hp的hp bar，我有一个输入可以输入我的伤害......但是当我输入2999时，它应该是1/3000吧，并且当前Hp条的宽度是0%，问题是，当我再次做2999时，它仍然是1/3000，应该是0/3000，我不知道为什么。这是我的代码：

        let damage = 0;
        let width = 100;
        let minWidth = 0;
        let text = '';
        let hp = document.getElementById('hp');
        let hpText = document.getElementById('hpText');
        let currentHp = 3000;
        let maxHp = 3000;
        hpText.innerText = currentHp + '/' + maxHp;
        
        let setUp = () => {
            
            damage = parseInt(document.getElementById('text').value);
            text = document.getElementById('text').value;
            
            if(text.length > 0){
                currentHp -= damage;
            }
            
            if(currentHp <= 0) {
                currentHp = 0;
            }
            
            minWidth = (currentHp / maxHp) * 100;
            
            let interval = setInterval(() => {
                
                if(!(width <= minWidth)) {
                    if(width <= 0) {
                        currentHp = 0;
                        hpText.innerText = currentHp + '/' + maxHp;
                        clearInterval(interval);
                        alert('ha')
                        return;
                    }
                    
                    width--;
                    
                    hp.style.width = width + '%';
                    hpText.innerText = currentHp + '/' + maxHp;
                    
                    if(width <= minWidth) {
                        alert(minWidth + " " + width)
                        clearInterval(interval);
                        return;
                    }
                }
                
            }, 15);
            
        }

标签： javascriptprogress-bar

解决方案

既然可以让它变得复杂，为什么还要让它变得简单呢？;)

另请参阅样式：CSS 中的自定义样式进度条

const hp =
  { bar: document.getElementById('hp-bar')
  , txt: document.getElementById('hp-bar').nextElementSibling
  , itv: null
  }
hp.itv = setInterval(()=>
  {
  hp.bar.value      += 10
  hp.txt.textContent = `${hp.bar.value} / ${hp.bar.max}`
  if ( hp.bar.value >= hp.bar.max) clearInterval( hp.itv  )
  },200)
progress {
  --bar-color     : #0c1c499d;
  width           : 20em;
  height          : .6em;
  color           : var(--bar-color);
  transition      : All 0.2s linear;
  }
progress::-moz-progress-bar {
  background-color: var(--bar-color);
  }
progress ~ span {
  display       : inline-block;
  width         : 6.6em;
  margin-left   : 1em;
  padding       : .1em .5em;
  text-align    : right;
  border        : 1px solid cadetblue;
  border-radius : .4em;
  transform     : translateY(.2em);
  }
<progress id="hp-bar" min="0" max="3000" value=0></progress><span>0 / 3000</span>

推荐阅读