如何使用HTML和JavaScript制作进度条_Javascript_Html

如何使用HTML和JavaScript制作进度条

javascript html

如何使用HTML和JavaScript制作进度条,javascript,html,Javascript,Html,我试着做一个进度条只是为了看起来，但它不起作用。代码如下： <!DOCTYPE html> <html> <head> <title>Page 1</title> <style> #loader {background-color:#ffffff;position:absolute;top:0px;left:0px;width:100%;height:100%;} #l

我试着做一个进度条只是为了看起来，但它不起作用。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Page 1</title>
      <style>
        #loader {background-color:#ffffff;position:absolute;top:0px;left:0px;width:100%;height:100%;}
        #loadertitle {position:relative;top:20px;left:39%;font-size:120px;}
        #loadingdiv {position:relative;top:47%;left:43%;width:180px;height:55px;}
        #loadingbar {position:absolute;top:50%;left:0px;width:100%;height:8px;background-color:#794c79;}
        #loadingbarprogress {position:relative;top:0px;left:0px;height:100%;width:0%;background-color:#400040;}
        #loadingtext {position:relative;top:13%;left:46%;}
      </style>
      <script>
        var progress = document.getElementById('loadingbarprogress');
        loadingbar(progress, 500);
        function doMove() {
          progress.style.width = parseInt(progress.style.width) + 1 +'%';
          if (progress.style.width = '100%') {
            progress = null;
          }
          setTimeout(doMove,20);
        }
      </script>
    </head>
    <body>
      <div id="loader">
        <h1 id="loadertitle">Site</h1>
        <div id="loadingbar">
          <div id="loadingbarprogress">
        </div>
      </div>
      <p id="loadingtext">Loading...</p>
    </div>
  </body>
</html>


第1页
#加载器{背景色：#ffffff；位置：绝对；顶部：0px；左侧：0px；宽度：100%；高度：100%；}
#loadertitle{位置：相对；顶部：20px；左侧：39%；字体大小：120px；}
#loadingdiv{位置：相对；顶部：47%；左侧：43%；宽度：180px；高度：55px；}
#加载条{位置：绝对；顶部：50%；左侧：0px；宽度：100%；高度：8px；背景色：#794c79；}
#加载条进度{位置：相对；顶部：0px；左侧：0px；高度：100%；宽度：0%；背景色：#400040；}
#加载文本{位置：相对；顶部：13%；左侧：46%；}
var progress=document.getElementById（'loadingbarprogress'）；
加载杆（进度，500）；
函数doMove（）{
progress.style.width=parseInt（progress.style.width）+1+'%'；
如果（progress.style.width='100%”{
进度=空；
}
setTimeout（doMove，20）；
}
场地
正在加载

我有一个用于加载程序的div，一个用于进度的div，还有一些脚本包含一个循环（可能不起作用），用于更改进度div的宽度

固定代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Page 1</title>
    <style>
      #loader {background-color:#ffffff;position:absolute;top:0px;left:0px;width:100%;height:100%;}
      #loadertitle {position:relative;top:20px;left:39%;font-size:120px;}
      #loadingbar {position:absolute;top:50%;left:0px;width:100%;height:8px;background-color:#794c79;border:none}
      #loadingbar::-moz-progress-bar {background-color:#400040;}
      #loadingtext {position:relative;top:13%;left:46%;}
    </style>
    <script>
      var bar = document.getElementById('loadingbar');
      for (int x = 0; x <= 100; x++) {
        bar.value = x;
      }
    </script>
  </head>
  <body>
    <div id="loader">
      <h1 id="loadertitle">Site</h1>
      <progress id="loadingbar" value="10" max="100"></progress>
      <p id="loadingtext">Loading...</p>
    </div>
  </body>
</html>


第1页
#加载器{背景色：#ffffff；位置：绝对；顶部：0px；左侧：0px；宽度：100%；高度：100%；}
#loadertitle{位置：相对；顶部：20px；左侧：39%；字体大小：120px；}
#加载条{位置：绝对；顶部：50%；左侧：0px；宽度：100%；高度：8px；背景色：#794c79；边框：无}
#加载条：：-moz进度条{背景色：#400040；}
#加载文本{位置：相对；顶部：13%；左侧：46%；}
var bar=document.getElementById（'loadingbar'）；
对于（intx=0；xHTML5现在有一个
你可以在一些浏览器中进行大量定制。请参阅上面css技巧的链接，其中包含了大量的细节
<progress max="100" value="80" id="progress_bar"></progress>



然后，您可以使用javascript更新value属性，无论您的进度来自哪个数据源
如果您只是希望它以稳定的速率增加，请使用简单的setTimeout：
var progress_element = document.getElementById('progress_bar');
function stepProgress() {
  progress_element.value += 1;
  if(progress_element.value < 100) {
    setTimeout(stepProgress, 100);
  }
};

var progress\u element=document.getElementById（'progress\u bar'）；
函数stepProgress（）{
进度元素值+=1；
如果（进度元素值<100）{
设置超时（步进，100）；
}
};

您可能需要在progress\u元素.value上使用parseInt，或者只需要一个单独的计数器变量。
HTML5现在有一个
你可以在一些浏览器中进行大量定制。请参阅上面css技巧的链接，其中包含了大量的细节
<progress max="100" value="80" id="progress_bar"></progress>



然后，您可以使用javascript更新value属性，无论您的进度来自哪个数据源
如果您只是希望它以稳定的速率增加，请使用简单的setTimeout：
var progress_element = document.getElementById('progress_bar');
function stepProgress() {
  progress_element.value += 1;
  if(progress_element.value < 100) {
    setTimeout(stepProgress, 100);
  }
};

var progress\u element=document.getElementById（'progress\u bar'）；
函数stepProgress（）{
进度元素值+=1；
如果（进度元素值<100）{
设置超时（步进，100）；
}
};

您可能需要在progress\u元素.value上使用parseInt，或者只使用一个单独的计数器变量。
代码中有一个问题。到目前为止，我注意到：
if (progress.style.width = '100%') {//<-- single equals sign, its assignment not condition !

您的代码中有一个问题。到目前为止，我注意到：
if (progress.style.width = '100%') {//<-- single equals sign, its assignment not condition !

我倾向于使用jqueryUI中的一个：它非常灵活且易于使用。我倾向于使用jqueryUI中的一个：它非常灵活且易于使用。我希望可以定制酒吧。我之所以不使用tag@Brandon你可以自定义进度标签。请参阅我答案中css技巧的链接。我希望自定义进度条。有一个我没有使用该工具的原因tag@Brandon你可以自定义进度标签。请看我答案中css技巧的链接。@Brandon，这不是花哨，但它对你有用me@Arvind，这个例子非常神秘。ocn
？cnt
？ncn
？l
？文档有什么问题。使用querySelectorAll
而不是GetElementsByCassName
？等等。@Arvind不是真的，当它达到100%时，100%跳转到另一行。但是你没有抓住要点-代码不只是坐在那里不做任何正常的事情；它必须被更改，这就是当这样的事情成为问题时。@CameronMartin，我不明白你的意思，跳转到另一行
？@Arvind什么？我说像你这样不清楚的代码很难维护。@Brandon，这里是，它不是花哨的，但对你有用me@Arvind，这个例子非常神秘。ocn
？cnt
？ncn
？l
？文档有什么问题。使用querySelectorAll
而不是getElementsByClassName
？等等。@Arvind不是真的，当100%达到100%时，100%跳转到另一行。但是你没有抓住要点-代码不只是坐在那里正常地什么都不做；它必须被更改，这就是当这样的事情成为问题时。@CameronMartin，我没有收到你的订单int，跳转到另一行
？@Arvind什么？我说像你这样不清楚的代码很难维护。