html和js实现滚动条效果详解编程语言

 <!-- 遮罩层 --> 
        <div id="zzc" style="z-index:-1;height:100%;width: 100%; position:absolute;left:0px;top:0px;bottom:0px; background-color:#000;opacity:0.8;"></div> 
        <!-- 进度条 --> 
        <div id="jdt" style="z-index:-1;height:25px;width: 500px;border: 1px solid rgb(204,204,204); position:absolute;left:30%;top:47%; border-radius:5px;"> 
               <div id="prompt" style="width:200px; height:0px; color:rgb(255,255,255); position:relative;left:40%;top:0px; border-radius:5px;"></div> 
            <div style="height:23px;width:0px;background-color: rgb(0,192,239); top="0px" id="progressBar"> 
            </div> 
        </div> 
        <input type="button" value="开始" onclick="doStart()" /> 
        <input type="button" value="暂停" onclick="doStop()" /> 
        <input type="button" value="停止" onclick="doCleaner()" /> 

　　          
　　　　   var width = 0;
　　　　   var number = 0;

　　　　　　var timer = null;

　　　　 //进度条 
        function doStart() { 
            timer = window.setTimeout("onChange()", 10); 
        } 
 
        function doStop() { 
            window.clearTimeout(timer); 
        } 
 
        function onChange() { 
            $('#zzc').css('z-index','101'); 
            $('#jdt').css('z-index','102'); 
            if(width == 500) { 
                window.clearTimeout(timer); 
            }else { 
                number += 1; 
                if(number<500){ 
                    $("#prompt").text((number/5)+'%'); 
                } 
                width += 1; 
                $("#progressBar").css('width',width+'px'); 
                timer = window.setTimeout("onChange()", 10); 
            } 
        } 
        function doCleaner(){ 
            $('#zzc').css('z-index','-2'); 
            $('#jdt').css('z-index','-1'); 
            window.clearTimeout(timer); 
            width = 0; 
            number = 0; 
            $("#prompt").text(''); 
            $("#progressBar").css('width',width+'px'); 
        }