JavaScrpit简易进度条

 

<! 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:#FFE7F4;
float :left;
height: 100 % ;
text - align:center;
}
< / style>
< script >
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>
< / HEAD>

< BODY >
< div id = " graph " >
< strong id = " bar " style = " width:1%; " >< / strong>
< / div>
< / BODY>

< SCRIPT type = " text/JavaScript " src = " ProgressBar.js " >< / SCRIPT>
< SCRIPT type = " text/JavaScript " >
<!--
function a() {
alert( ' finish ' );
}

var bar = new ProgressBar(document.getElementById( ' bar ' )); // 构造方法，参数必须填
bar.speed = 20 ; // 设定间隔时间，非必须
bar.start(a); // a为回调方法，非必须
// -->
< / SCRIPT>
< / HTML>

 

 

 

转载于:https://www.cnblogs.com/gaoyoubo/articles/1748085.html