进度条

最新推荐文章于 2023-12-17 01:50:58 发布

sun_gufeng

最新推荐文章于 2023-12-17 01:50:58 发布

阅读量81

点赞数

分类专栏： JavaScript 文章标签： prototype HTML

本文链接：https://blog.csdn.net/sun_gufeng/article/details/83635362

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Progress Bar</TITLE>
<style type="text/css">
#graph{
width:450px;
border:1px solid #F8B3D0;
height:25px;
}

#bar{
display:block;
background:#aaaaaa;
float:center;
height:100%;
text-align:center;
}
</style>
</HEAD>

<BODY>
<div id="graph">
<strong id="bar" style="width:1%;"></strong>
</div>
</BODY>
<SCRIPT type="text/JavaScript">
function ProgressBar(bar) {
this.bar = bar;
this.speed = 50;
}

ProgressBar.prototype.move = function(moveing, callback) {
this.bar.style.width = parseInt(this.bar.style.width) + 1 + "%";

if(this.bar.style.width == "100%"){
window.clearInterval(moveing);
if (callback != null) {
callback();
}
}

}

ProgressBar.prototype.start = function(callback) {
var moveing = window.setInterval(function() {
bar.move(moveing, callback);
}, this.speed);
}

ProgressBar.prototype.clear = function() {
this.bar.style.width = "1%";
}


</SCRIPT>
</HTML>