我需要设置什么限制值才能停止我的功能？

Question

我正在尝试仅使用Javascript创建一个带有百分比文本的进度条，但我不知道我需要在函数中设置什么值来限制增量。栏和文本不断增加。需要创建4个技能栏，分别为30%/ 50% / 70%和90%。请帮忙！接受任何建议！这是我的代码。    <div class="progress">        <div class="progress-bar"></div>        <p value="30" class="text">30</p>    </div>  <script>    function update() {       let element = document.querySelector(".progress-bar");          let counter = document.querySelector(".text");      var width = 1;       var identity = setInterval(scene, 10);       function scene() {         if (width >= counter.value) {           clearInterval(identity);         } else {           width++;            element.style.width = width + '%';            counter.innerHTML = width * 1  + '%';         }       }     } </script>

Answer 1

欢迎来到Stackoverflow！您可以在下面看到代码的工作示例，只需进行最少的更改。我刚刚定义，当百分比达到100时，它会清除页面上的间隔。

function update() {

  let element = document.querySelector(".progress-bar");

  let counter = document.querySelector(".text");

  var percenteage = 0;

  var identity = setInterval(scene, 50);

  function scene() {

    if (percenteage < 100) {

      percenteage++;

      element.style.width = percenteage + '%';

      counter.innerHTML = percenteage + ' %';

    } else {

      clearInterval(identity);

      console.log("Cleared!");

    }

  }

}

update();

.progress-bar {

  height: 10px;

  background-color: red;

}

<div class="progress">

  <div class="progress-bar"></div>

  <p value="30" class="text">30</p>

</div>

Answer 2

我不确定我是否正在跟踪您遇到的问题。我看到你的代码可以改进，并会解决一些问题。以下是我的建议：

function update() { 

  let element = document.querySelector(".progress-bar");    

  let counter = document.querySelector(".text");

  let width = 1; 

  setTimeout(scene, 1); 

  function scene() { 

    if (width < 100) {

      width++;  

      element.style.width = width + '%';  

      counter.innerHTML = width * 1  + '%'; 

      setTimeout(scene, 1); 

    } else {

      //Complete action here

    } 

  } 

}