`

进度条

prototypeHTML 
阅读更多


<!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%";   
} 

<!--  
        function a() {  
            alert('finish');  
        }  

        var bar = new ProgressBar(document.getElementById('bar')); // 构造方法，参数必须填  
        //bar.speed = 20; // 设定间隔时间，非必须  
        bar.start(a); // a为回调方法，非必须  
       //--> 
   </SCRIPT> 
</HTML>
分享到：
| linux 命令
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics