我如何只需点击一次就能增加1%的百分比

Question

我希望百分比每秒增加1%，只需点击增加按钮和减少按钮相同，但百分比每秒减少-1%。现在我的代码是正确的，但它需要在增加按钮上多次点击以达到100%，我只需要一次点击，它会每秒增加1%，直到达到100%，如果点击减少按钮，每秒减少1%。

<div class="container">
    <div class="progress">
        <div id = "number" class="progress-bar" role="number" style="width: 0%;" aria-precentnow="0" aria-precentmin="0" aria-precentmax="100" id="number">0%</div>
    </div>

    <br>
    <button onclick="increase()">Increase</button>
    <button onclick="decrease()">Decrease</button>
    <button onclick="reset()">Reset</button>

    <p id="precent"> </p>

</div>
<script>

function value() {
    var x = document.getElementById("number").getAttribute("aria-precentnow");
    return x;
}

function rvalue(precent) {
    document.getElementById("number").setAttribute("aria-precentnow", precent);  
    document.getElementById("number").setAttribute("style", "width: " + precent + "%;");
    document.getElementById("number").innerHTML = (precent + "%");
}


function increase() {
    var i = value();
    if (i <= 100) {
        i++;
        rvalue(i);
    } else {
        alert("Congrats you hit 100%");
    }
}

function decrease() {
    var x = value();
    rvalue(x - 1);
}

function reset() {
    var y = value();
    rvalue(y = 0);
}
</script>

Answer 1

调用现有增减值的递归超时函数可以起到以下作用：

此处的IncreaseAuto/IndreaseAuto函数将调用正常的增加/减少，但也会在1秒后再次调用自身。

您还可以在任何地方使用cleartimeout(autoTimeout)（例如，当您达到100%或重置时）来停止自动进行。

function increaseAuto() {
  // Clear any existing timeout (As this would carry on when you try to switch direction)
  clearTimeout(autoTimeout)
  // Run the normal increase function
  increase()
  // Set a timeout to trigger this again in 1 second
  autoTimeout = setTimeout(increaseAuto, 1000)
}

完整示例：

null

// - New code
// This variable is used to keep track of the timeout
var autoTimeout = null

// This function will trigger the increase, but also call itself again after 1 second
function increaseAuto() {
  clearTimeout(autoTimeout)
  increase()
  autoTimeout = setTimeout(increaseAuto, 1000)
}

// This is the same as the above, but for decrease
function decreaseAuto() {
  clearTimeout(autoTimeout)
  decrease()
  autoTimeout = setTimeout(decreaseAuto, 1000)
}

// - Existing code with minor clearTimeouts added:
function value() {
  var x = document.getElementById("number").getAttribute("aria-precentnow");
  return x;
}

function rvalue(precent) {
  document.getElementById("number").setAttribute("aria-precentnow", precent);
  document.getElementById("number").setAttribute("style", "width: " + precent + "%;");
  document.getElementById("number").innerHTML = (precent + "%");
}

function increase() {
  var i = value();
  if (i <= 100) {
    i++;
    rvalue(i);
  } else {
    alert("Congrats you hit 100%");
    // Once you hit 100% stop ticking upwards
    clearTimeout(autoTimeout)
  }
}

function decrease() {
  var x = value();
  rvalue(x - 1);
}

function reset() {
  var y = value();
  rvalue(y = 0);
  clearTimeout(autoTimeout)
}

<div class="container">
  <div class="progress">
    <div id="number" class="progress-bar" role="number" style="width: 0%;" aria-precentnow="0" aria-precentmin="0" aria-precentmax="100" id="number">0%</div>
  </div>

  <br>
  <button onclick="increaseAuto()">Increase</button>
  <button onclick="decreaseAuto()">Decrease</button>
  <button onclick="reset()">Reset</button>

  <p id="precent"> </p>

</div>

Answer 2

您需要设置ProgressBar属性以及TextContent。

null

const progressBar = document.querySelector('.progress > .progress-bar');

const getProgress = () => parseInt(progressBar.getAttribute('aria-precentnow'), 10);

const setProgress = (val) => {
  progressBar.setAttribute('aria-precentnow', val);
  progressBar.textContent = `${val}%`;
  progressBar.style.width = `${val}%`
}

const addProgress = (amount) => {
  const val = getProgress() + amount;
  setProgress(val > 100 ? 100 : val < 0 ? 0 : val);
};

window.increase = () => addProgress(1);
window.decrease = () => addProgress(-1);
window.reset = () => setProgress(0);

.progress-bar {
  background: #F88;
  text-align: right;
  padding: 0.25em;
}

html prettyprint-override"><div class="container">
  <div class="progress">
    <div id="number" class="progress-bar" role="number" style="width: 0%;" aria-precentnow="0" aria-precentmin="0" aria-precentmax="100" id="number">0%</div>
  </div>
  <br>
  <button onclick="increase()">Increase</button>
  <button onclick="decrease()">Decrease</button>
  <button onclick="reset()">Reset</button>
  <p id="precent"> </p>
</div>