[英]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.