js进度条容易模拟-JavaSript-爱易网页

js进度条容易模拟

日期：2014-05-16　浏览次数：20314 次

js进度条简单模拟
基于jquery自己写了个进度条，可以进行简单配置。代码如下：

window.ui=window.ui||{};   
window.ui.progressbar=window.ui.progressbar||{};   
  
window.ui.progressbar={   
    progressArea:null,// 页面中的div id
    isInited:false, // 初始化标记
    bgImageUrl:null,// 背景图片
    // 进度条初始化
    initProgressBar:function (progressArea){   
        this.progressArea=progressArea;  
        // 顶层div样式
        var ui_progressbar_container_css={   
            "color": "#784848",   
            "width": "30%",   
            "height": "32px",   
            "line-height": "32px",   
            "background-color":"#bdb76b",  
            "position": "absolute",   
            "left":"35%",   
            "top":"50%",  
            "z-index":"1004"  
        };   
        // 滚动div样式 
        var ui_progressbar_scroll_css={   
            "width": "0px",   
            "height": "32px",   
            "background": "#87ceeb",   
            "position": "absolute",
            "background-image":"url("+this.bgImageUrl+")",
        };   
        // 文字显示样式 
        var ui_progressbar_display_text_css={   
            "width": "100%",   
            "height": "32px",   
            "line-height": "32px",   
            "text-align": "center",   
            "position": "absolute"  
        };   
        // 构造进度条的div
        $("<div  id='ui_progressbar_container'/>").css(ui_progressbar_container_css).appendTo($("#"+this.progressArea));   
        $("<div id='ui_progressbar_scroll'/>").css(ui_progressbar_scroll_css).appendTo($("#ui_progressbar_container"));   
        $("<div id='ui_progressbar_display_text'/>").css(ui_progressbar_display_text_css).appendTo($("#ui_progressbar_container"));   
          
    },   
      
    loadingInterval:null,// 运行定时器
    
    // 进度条运行方法
    loading:function() {   
        var currentPoint = 0;   
        var percentage = null;     
        var that=this;  
        var hasSlowDwon=false;  
        var fun = function() {       
            if (currentPoint > 98) {   
                clearInterval(that.loadingInterval);   
                return;   
            }            
            if (currentPoint > 80) {   
                currentPoint += 1;   
                percentage = currentPoint;   
                  
                if(!hasSlowDwon){  
                    clearInterval(that.loadingInterval);   
                    that.loadingInterval = setInterval(fun, 1000);   
                    hasSlowDwon=true;  
                }  
            } else {   
                currentPoint += 1;   
                percentage = currentPoint;   
            }   
            that.changeProgressValue(percentage);  
        };   
        this.loadingInterval = setInterval(fun, 50);           
    },   
    // 进度条值改变方法
    changeProgressValue:function(percentage){  
        $('#ui_progressbar_scroll').animate( { width : percentage + '%' }, 0, function() {   
            $('#ui_progressbar_display_text').text("Progress..." + percentage + "%");   
        });   
    },  
      
    // 进度条开始方法
    startProgress:function(progressArea){     
        if(!this.isInited){  
            this.initProgressBar(progressArea);   
            this.isInited=true;  
        }  
        this.changeProgressValue(0);       
        this.loading();   
        $("#"+this.progressArea).show();  
    },  
    // 进度条完成方法
    completeProgress:function(){  
            clearInterval(this.loadingInterval);             
            this.changeProgressValue(100);  
            $("#"+this.progressArea).hide();  
    }  
};

测试代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>jQuery模拟页面加载进度条</title>
</head> 
<body>
<div id="progressArea"></div>

<script type="text/javascript" src="../jslib/jquery-1.8.1.min.js"><

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js进度条容易模拟

相关资料更多>

推荐阅读更多>