html和js实现滚动条效果

HTML部分

 <!-- 遮罩层 -->
        <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()" /> 

JS部分

　　          
　　　　   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');
        } 

 

转载于:https://www.cnblogs.com/hq233/p/9306670.html