个人中心
gpt4 book ai didi

javascript - 运行进度条，每次循环的时间间隔都会改变

转载 作者：行者123 更新时间：2023-12-02 21:33:36 25 4
gpt4 key购买 nike

我使用 setInterval 函数制作了一个进度条，宽度从 100 减少到 0。所以基本上每 20 毫秒我的宽度就会从 1 减少。然后当 width 到达 0 时，我将 width 设置为 100 以再次运行进度条。在每个循环中，我都会更改进度条内的文本。我现在想做的是更改每个循环的时间间隔(20 毫秒)。

Si 在我的代码中，当我从 1 增加时，我的 20 被 interval[i] 替换...但我堆栈将 setInterval 放入循环中...

下面的代码可以在每次循环时更改文本，但不知道如何改进它以更改每次迭代的时间间隔... 

function move() {
  var message = ['test', 'test2', 'test3'];
  var interval = [10, 20, 30]
  var elem = document.getElementById("myBar");

  var width = 100;
  var i = 0;

  var id = setInterval(frame, 20);

  function frame() {

    width = width - 1;
    elem.style.width = width + "%";
    elem.textContent = message[i];
    if (width == 0 && i < 3) {
      width = 100;
      i++;
    }
    if (i == 3) {
      clearInterval(id);
    }
  }
}
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 100%;
  height: 30px;
  background-color: #4CAF50;
}
<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"> </div>
</div>

<br>
<button onclick="move()">Click Me</button>

最佳答案 

<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 100%;
  height: 30px;
  background-color: #4CAF50;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"> </div>
</div>

<br>
<button onclick="move()">Click Me</button> 

<script>

function move() {
        var message = ['test','test2','test3'];
        var interval = [10,20,30]
        var elem = document.getElementById("myBar");

        var width = 100;
        var i = 0;


        var id = setInterval(frame, interval[i]);

      function frame() {

          width = width - 1;
          elem.style.width = width + "%";
          elem.textContent = message[i];
          if (width == 0 && i < 3) {
            width = 100;
            i++;
            clearInterval(id);
            id = setInterval(frame, interval[i]);
          }

          if (i == 3) {
            clearInterval(id);
          }
        }

      }

</script>

</body>
</html>

关于javascript - 运行进度条，每次循环的时间间隔都会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60561301/

25 4 0
文章推荐： python - 服务 attention_ocr 模型时出错 ("error": "Expected one or two output Tensors, found 17")
文章推荐： asp.net - 使用 ASP.NET WebForms 避免出现大泥球的技巧
文章推荐： hibernate - Autowiring 依赖项注入(inject)失败；嵌套异常是 org.springframework.beans.factory.BeanCreationException :
文章推荐： firebase - 从 Firebase 存储与 Firebase 托管访问文件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com