简体   繁体   English

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

[英]How to make a progress bar using HTML and JavaScript

I am trying to make a progress bar just for looks, but it doesn't work. 我正在尝试为外观创建一个进度条,但是它不起作用。 Here is the code: 这是代码:

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

I have a div for the loader, a div for the progress, and some script containing a loop (that might not work), changing the width of the progress div. 我有一个用于加载程序的div,一个用于进度的div,以及一些包含循环(可能不起作用)的脚本,用于更改进度div的宽度。

Fixed code: 固定代码:

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

Thanks, Cameron! 谢谢,卡梅隆!

HTML5 now has a progress element . HTML5现在具有一个progress元素

You can get a lot of customisation in some browsers. 在某些浏览器中,您可以得到很多定制。 See the link to css-tricks above, it goes into a fair amount of detail. 请参阅上面的css-tricks链接,其中包含很多详细信息。

<progress max="100" value="80" id="progress_bar"></progress>

Then you can just update the value attribute using javascript, with whatever data source your progress comes from. 然后,您可以使用javascript更新value属性,无论您的进度来自何数据源。

If you just want it to increase at a steady rate, use a simple setTimeout: 如果只希望以稳定的速度增加,请使用简单的setTimeout:

var progress_element = document.getElementById('progress_bar');
function stepProgress() {
  progress_element.value += 1;
  if(progress_element.value < 100) {
    setTimeout(stepProgress, 100);
  }
};

You may need to use parseInt on your progress_element.value , or just have a separate counter variable. 您可能需要在progress_element.value上使用parseInt,或者仅具有一个单独的计数器变量。

There is a problem in your code. 您的代码中有问题。 So far I noticed this: 到目前为止,我注意到了这一点:

if (progress.style.width = '100%') {//<-- single equals sign, its assignment not condition !

EDIT: 编辑:

Try this then 然后试试这个

if (progress.style.width == '100') {

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM