按下按钮时如何增加进度条的值javascript答案

【问题标题】：how to increment the value of a progress bar when press a button javascript按下按钮时如何增加进度条的值javascript
【发布时间】：2018-05-03 13:11:19
【问题描述】：

这是一个非常简单的程序，当您按下按钮时，进度条内的值会增加，直到达到 100%。

<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>
  <div class="w3-container">

  <h2>dynamic Progress bar</h2>
  <p>example:</p>

  <div class="w3-light-grey">
    <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
  </div>
  <br>
  <button class="w3-button w3-green" onclick="move()">Click Me</button> 
</div>

<script>
function move() {
    var elem = document.getElementById("myBar"); 
    var width = 20;
    var id = setInterval(frame, 10);
    
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
            elem.innerHTML = width * 1 + '%';
        }
    }
}
</script>

</body>
</html>

当您按下按钮时，无论进度条内的值是多少（例如 10% 20%），它都会达到 100%。我希望当我按下按钮时，值仅增加一定数量（例如，如果值为 10%，并且我按下按钮，我希望值将达到 20%）。

谢谢大家！！

【问题讨论】：

这段代码几乎是从 W3Schools 直接复制和粘贴的：w3schools.com/howto/howto_js_progressbar.asp 显示您自己尝试过的内容，也许我们可以帮助您！这里有一个提示，setInterval(frame, 10) 将每 10ms 调用一次frame() 函数，因此不断更新进度条...
所以设置端点.....而不是100，把它设置为你想要的值。

标签： javascript html css progress-bar

【解决方案1】：

这是一种快速简单的方法，只需进行最少的更改，首先您需要声明一个保存“待定宽度”值的全局变量。这是动画完成后所需的进度条宽度。

接下来为了清楚起见，我将“width”变量的名称改为widthAnim。当 widthValue 的值改变时，widthAnim 将递增，直到达到相同的值。

widthIncrement 变量更改为您喜欢的任何值，它会按该数量递增。

最后，我在 frame 函数中添加了额外条件，以确保它仅以 widthIncrement 为增量增加。

var widthValue = 20;

function move() {
  var elem = document.getElementById("myBar");
  var widthAnim = widthValue;
  var id = setInterval(frame, 10);
  var widthIncrement = 10;

  widthValue = widthAnim + widthIncrement;

  function frame() {
    if (widthAnim >= widthValue || widthValue > 100) {
      clearInterval(id);
    } else {
      widthAnim++;
      elem.style.width = widthAnim + '%';
      elem.innerHTML = widthAnim * 1 + '%';
    }
  }
}

<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>
  <div class="w3-container">
    <h2>dynamic Progress bar</h2>
    <p>example:</p>
    <div class="w3-light-grey">
      <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
    </div>
    <br>
    <button class="w3-button w3-green" onclick="move()">Click Me</button>

  </div>
</body>

</html>

【讨论】：

【解决方案2】：

我修改了你的一些代码，当附加 100% 时它会清除计数器并从 0% 重新启动。

也许对你有帮助:)

<!DOCTYPE html>
<html>
<head>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>

<body>
  <div class="w3-container">

  <h2>dynamic Progress bar</h2>
  <p>example:</p>

  <div class="w3-light-grey">
    <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
  </div>
  <br>
  <button class="w3-button w3-green" onclick="move()">Click Me</button> 
</div>

<script>
function move() {
    var elem = document.getElementById("myBar"); 
    var width = parseInt(elem.innerHTML);
    var aim = width + 10;
    var id = setInterval(frame, 10);
    
    function frame() {
        if (width >= aim) {
            clearInterval(id);
        } else if(width >= 100) {
            width=0; 
            aim = 10;
            elem.style.width = width + '%'; 
            elem.innerHTML = width * 1 + '%';
        } else {
            width++;
            elem.style.width = width + '%'; 
            elem.innerHTML = width * 1 + '%';
        }
    }
}
</script>

</body>
</html>

【讨论】：

【解决方案3】：

一个解决方案是删除 setInterval，因为它会再次调用该函数而无需单击按钮。

此代码只是在函数之外定义宽度，然后在每次单击时将宽度增加 10 并更改进度条样式。

var width = 20;

function move() {
  var elem = document.getElementById("myBar");
    if (width < 100) {
      width+=10;
      elem.style.width = width + '%';
      elem.innerHTML = width * 1 + '%';
    }
  
}

<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>
  <div class="w3-container">
    <h2>dynamic Progress bar</h2>
    <p>example:</p>
    <div class="w3-light-grey">
      <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
    </div>
    <br>
    <button class="w3-button w3-green" onclick="move()">Click Me</button>

  </div>
</body>

</html>

【讨论】：

虽然这是一个解决方案，但它消除了通过 setInterval 完成的滑动效果，它不应该被移除，而是在宽度达到所需数字时被清除。旁注：不是我的反对票。
好吧，事实是我正在编辑答案以添加滑动效果，但编辑一直告诉我缩进错误，所以我放弃了：但你绝对正确。

【解决方案4】：

你可以做的是设置一个初始值width，例如20，并在setInterval回调中不断增加它直到它是40（你可以通过用20取余数来检查）等等在。

 if(width % 20 === 0 ) clearInterval(id)

这里是sn-p

var elem = document.getElementById("myBar");
var width = 20;
var id = null;
var click = false;
function move() {
if(!click){
  click = true;
  id = setInterval(function() {
    width++;
    if (width > 100) width = 20;
    if (width % 20 === 0){
    clearInterval(id);
    click = false;
    }
    elem.style.width = width + '%';
    elem.innerHTML = width * 1 + '%';
  }, 30);
}

}

<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>
  <div class="w3-container">

    <h2>dynamic Progress bar</h2>
    <p>example:</p>

    <div class="w3-light-grey">
      <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
    </div>
    <br>
    <button class="w3-button w3-green" onclick="move()">Click Me</button>

  </div>
</body>
</html>

【讨论】：

如果您单击“点击我”按钮两次，您的进度条将不断更新和重置。

【解决方案5】：

当width 是 10 的倍数时，要达到预期的结果，您应该调用 clearInterval(id)。这将停止调用 frame() 函数，直到再次调用 move() 函数（当用户单击按钮）

要确定宽度是否是 10 的倍数，可以使用余数运算符：

if (width % 10 == 0) {
    clearInterval(id);
}

width 也应该是一个全局变量，在 move() 函数之外，以便可以在两次按钮点击之间跟踪进度。

var width = 20;
var id = null;

function move() {
  if (width == 100) {
      return;
  }

  var elem = document.getElementById("myBar");

  if (id) {
      clearInterval(id);
  }

  id = setInterval(frame, 10);

  function frame() {
    width ++;
    elem.style.width = width + '%';
    elem.innerHTML = width * 1 + '%';

    if (width % 10 == 0) {
      clearInterval(id);
    }
  }
}

<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>
  <div class="w3-container">
    <h2>dynamic Progress bar</h2>
    <p>example:</p>
    <div class="w3-light-grey">
      <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
    </div>
    <br>
    <button class="w3-button w3-green" onclick="move()">Click Me</button>

  </div>
</body>

</html>

【讨论】：