javascript - 如何制作根据特定输入数字变量变化的进度条？

Question

当我在进度条的值的输入数字变量和进度条的最大值的另一个输入变量中按 Enter 键时，我想做一些改变，有点像这样:

但是，这些值并不总是相同的，所以，这就是为什么我想知道如何将输入变量与进度条同步。
我对编码真的很陌生，我还不知道 JavaScript。我仍然要检查它，但我不想仅仅为了一件事而了解它的一切。
我制作的 HTML 代码是这样的:

<div id="lifepog">
    <input type="number" class="currentlife" max="20" min="0" value="0">
    <div id="lifeslash" contenteditable="false">
        <p>/</p>
    </div>
    <input type="number" class="totallife" max="20" min="0" value="0">
</div>
<div id="lifebar">
    <progress value="10" max="20" class="barlife"></progress>
</div>

Answer 1

您可以收听 input事件并根据每个数字输入的值更新进度条的属性:

// Select the progress bar by its class
const progress = document.querySelector('.barlife');

// Set the progress bar's value based off the top input
const numerator = (e) => {
  progress.value = e.target.value;
}

// Set the progress bars max value based off the bottom input
const denominator = (e) => {
  progress.max = e.target.value;
}

<div id="lifepog">
  <input oninput="numerator(event)" type="number" class="currentlife" max="20" min="0" value="10">
  <div id="lifeslash" contenteditable="false">
    <p>/</p>
  </div>
  <input oninput="denominator(event)" type="number" class="totallife" max="20" min="0" value="20">
</div>
<div id="lifebar">
  <progress value="10" max="20" class="barlife"></progress>
</div>

对于多个进度条，您可以将索引传递给每个函数:

// Select the progress bar by its class
const progressBars = document.querySelectorAll('.barlife');

// Set the progress bar's value based off the top input
const numerator = (e, index) => {
  progressBars[index].value = e.target.value;
}

// Set the progress bars max value based off the bottom input
const denominator = (e, index) => {
  progressBars[index].max = e.target.value;
}

<div id="lifepog">
  <input oninput="numerator(event, 0)" type="number" class="currentlife" max="20" min="0" value="10">
  <div id="lifeslash" contenteditable="false">
    <p>/</p>
  </div>
  <input oninput="denominator(event, 0)" type="number" class="totallife" max="20" min="0" value="20">
</div>
<div id="lifebar">
  <progress value="10" max="20" class="barlife"></progress>
</div>

<div id="lifepog">
  <input oninput="numerator(event, 1)" type="number" class="currentlife" max="20" min="0" value="10">
  <div id="lifeslash" contenteditable="false">
    <p>/</p>
  </div>
  <input oninput="denominator(event, 1)" type="number" class="totallife" max="20" min="0" value="20">
</div>
<div id="lifebar">
  <progress value="10" max="20" class="barlife"></progress>
</div>

<div id="lifepog">
  <input oninput="numerator(event, 2)" type="number" class="currentlife" max="20" min="0" value="10">
  <div id="lifeslash" contenteditable="false">
    <p>/</p>
  </div>
  <input oninput="denominator(event, 2)" type="number" class="totallife" max="20" min="0" value="20">
</div>
<div id="lifebar">
  <progress value="10" max="20" class="barlife"></progress>
</div>

现在，对于动画，你必须稍微改变一下。您不能为进度元素设置动画，因为它是浏览器的 native 元素。
您需要的是 的 div模仿进度条的行为:

const progress = document.getElementById('lifebar-inner');
const numeratorInput = document.querySelector('.currentlife');
const denominatorInput = document.querySelector('.totallife');

/* Set the max-width by calculating what percentage 
  the top input is of the bottom input */
const setProgress = () => {
  progress.style.maxWidth = `
    ${(numeratorInput.value / denominatorInput.value) * 100}%
  `;
}

#lifebar {
  margin: 10px;
  height: 10px;
  width: 200px;
  border: 1px solid grey;
  border-radius: 10px;
  overflow: hidden;
}

#lifebar-inner {
  background-color: lightblue;
  height: 100%;
  width: 100%;
  max-width: 50%;
  /* Transition the max-width property, 
    as it's smoother than transitioning the width property */
  transition: max-width 0.35s cubic-bezier(0.9, 0.4, 0.6, 0.7);
}

<div id="lifepog">
  <input oninput="setProgress()" type="number" class="currentlife" max="20" min="0" value="10">
  <div id="lifeslash" contenteditable="false">
    <p>/</p>
  </div>
  <input oninput="setProgress()" type="number" class="totallife" max="20" min="0" value="20">
</div>
<div id="lifebar">
  <div id="lifebar-inner" />
</div>