Question

我试图制作一个简单的进度条，以便在调用JavaScript函数时始终加载10秒钟。我不想使用jQuery或任何库。我希望它使用干净的JavaScript。我不明白的唯一想法是，如何在10秒内使进度栏负载从0变为100％。我将提供到目前为止所完成的工作的代码。有什么建议吗？

var elem = document.getElementById("slide-progress-bar");
var width = 1;

function progressBar() {
  resetProgressBar();

  id = setInterval(frame, 100);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}

function resetProgressBar() {
  width = 1;
  elem.style.width = width + '%';
}

.slide-progress-bar {
  width: 1118px;
  background-color: rgba(155, 155, 255, 0.36);
  transition: width 10s linear;
  display: inline-block;
  vertical-align: middle;
}

.progress-bar {
  height: 5px;
  background-color: #aff;
  width: 1%;
  position: relative;
  transition: linear;
}

<div class="slide-progress-bar">
  <div class="progress-bar" id="progress-bar"></div>
  <!--progress-bar-->
</div>
<!--slide-progress-bar-->

Answer 1

这对我有用

我将elem更改为内部div，并从CSS删除了宽度

我也改变了速度

然后我实际上调用了函数

var elem = document.getElementById("progress-bar");
var width = 1;

function progressBar() {
  resetProgressBar();

  id = setInterval(frame, 10);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width +"%";
    }
  }
}
function resetProgressBar() {
  width = 1;
  elem.style.width = width;
}
progressBar()

.slide-progress-bar {
  width: 1118px;
  background-color: rgba(155, 155, 155, 0.36);
  transition: width 10s linear;
  display: inline-block;
  vertical-align: middle;
}

.progress-bar {
  height: 5px;
  background-color: #aff;
  position: relative;
  transition: linear;
}

<div class="slide-progress-bar">
  <div class="progress-bar" id="progress-bar"></div>
  <!--progress-bar-->
</div>
<!--slide-progress-bar-->

Answer 2

我认为您只需要更改宽度增加的元素即可。不确定这是否是您期望的行为：

with t (ID, Service, func) as (
  select 1 ,'abc1234hgf','Create' from dual union all
  select 6 ,'abc1234hgf','Create' from dual union all
  select 7 ,'abc1234hgf','Create' from dual union all
  select 9 ,'abc1234hgf','Create' from dual union all
  select 10 ,'abc1234hgf','Create' from dual union all
  select 2 ,'bvc8554mnb','Create' from dual union all
  select 3 ,'cxz1234poi','Update' from dual union all
  select 8 ,'cxz1234poi','Update' from dual union all
  select 4 ,'bvc8551mnb','Create' from dual union all
  select 5 ,'bvc8552mnq','Create' from dual 
)
select id, service, func from (
  select id, service, func, idx, rn, count(*) over (partition by idx, rn) cnt from (
    select t.*
    , substr(service, 4, 4) idx
    , row_number() over(partition by substr(service, 4, 4), decode(func, 'Create', 1, 'Update', 2) order by id) rn 
    from t
  )
)
where cnt = 2
order by idx, id
;

        ID SERVICE    FUNC 
---------- ---------- ------
         1 abc1234hgf Create 
         3 cxz1234poi Update 
         6 abc1234hgf Create 
         8 cxz1234poi Update

var elem = document.getElementById("progress-bar");
var width = 1;
var interval;

function progressBar() {
  resetProgressBar();

  interval = setInterval(frame, 100);

  function frame() {
    if (width >= 100) {
      clearInterval(interval);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}

function resetProgressBar() {
  width = 1;
  clearInterval(interval)
  elem.style.width = width + '%';
}

.slide-progress-bar {
  width: 1118px;
  background-color: rgba(155, 155, 255, 0.36);
  transition: width 10s linear;
  display: inline-block;
  vertical-align: middle;
}

.progress-bar {
  height: 5px;
  background-color: #aff;
  width: 1%;
  position: relative;
  transition: linear;
}

Answer 3

据我了解，我认为您正在寻找这个。进度条将在10秒后100％完成

 var elem = document.getElementById("progress-bar");
    var width = 1;

    function progressBar() {
        resetProgressBar();

        id = setInterval(frame, 1000);

        function frame() {
            if (width >= 100) {
                clearInterval(id);
            } else {
                width+=10;
                elem.style.width = width + '%';
            }
        }
    }

   

    function resetProgressBar() {
        width = 1;
        elem.style.width = width + '%';
    }
    
     progressBar();

.slide-progress-bar {
            width: 1118px;
            background-color: rgba(255, 0, 255, 0.36);
            transition: width 10s linear;
            display: inline-block;
            vertical-align: middle;
        }

        .progress-bar {
            height: 5px;
            background-color: #fff2ff;
            width: 1%;
            position: relative;
            transition: linear;
        }

 <div class="slide-progress-bar">
        <div class="progress-bar" id="progress-bar"></div>
        <!--progress-bar-->
 </div>

让我知道是否没事

Answer 4

嗨，请检查以下解决方案

var elem = document.getElementById("progress-bar");
var width = 1;
var id = {};

function progressBar() {

  id = setInterval(frame, 100);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}

progressBar()

.slide-progress-bar {
  width: 1118px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.9);
  transition: width 10s linear;
  display: inline-block;
  vertical-align: middle;
}

.progress-bar {
  height: 20px;
  width: 0;
  background-color: red;
  position: relative;
  transition: linear;
}

<div class="slide-progress-bar">
  <div class="progress-bar" id="progress-bar"></div>
  <!--progress-bar-->
</div>
<!--slide-progress-bar-->

使用JavaScript在10秒内制作进度条以从0加载到100％

4 个答案: