Question

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

＆＃13;

<!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>

＆＃13;

按下按钮时，进度条内的值（例如10％20％）达到100％。我希望当我按下按钮时，该值仅增加一定数量（例如，如果值为10％，我按下按钮，我希望该值将达到20％）。

感谢所有人!!

Answer 1

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

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

您可以做的是设置width的初始值，例如20并继续在setInterval回调中增加它，直到它为40（您可以通过用剩余的20）等等。

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

这是片段

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>

Answer 3

要获得所需的结果，当clearInterval(id)是10的倍数时，应调用width。这将阻止frame()函数被调用，直到move()函数为再次调用（当用户单击按钮时）

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

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

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

＆＃13;

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);
    }
  }
}

＆＃13;

<!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>

＆＃13;

Answer 4

这是一种快速简单的方法，只需最少的更改即可完成，首先需要声明一个全局变量，该变量保存＆＃34;宽度为＆＃34;的值。动画完成后，这是进度条的所需宽度。

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

widthIncrement 变量更改为您喜欢的任何内容，并且会增加该数量。

最后，我在帧函数中添加额外条件，确保它只以 widthIncrement 的增量上升。

＆＃13;

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 + '%';
    }
  }
}

＆＃13;

<!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>

＆＃13;

Answer 5

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

也许可以帮到你:)。

＆＃13;

<!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>

＆＃13;

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

5 个答案: