当前位置:首页 > 开发 > 系统架构 > 架构 > 正文

js进度条简单模拟

发表于: 2012-10-09   作者:antlove   来源:转载   浏览次数:
摘要: 基于jquery自己写了个进度条,可以进行简单配置。代码如下: window.ui=window.ui||{}; window.ui.progressbar=window.ui.progressbar||{}; window.ui.progressbar={ progressArea:null,// 页面中的div id isInited:f
基于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"></script> 
<script type="text/javascript" src="jslib/customer.ui.simple.progressbar.js"></script> 
<script> 
	window.ui.progressbar.bgImageUrl="logo000746.gif";// 设置背景图片 
	window.ui.progressbar.startProgress("progressArea");
      setTimeout("window.ui.progressbar.completeProgress()",2000);// 结束进度条
</script> 
</body> 
</html> 

js进度条简单模拟

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
效果图片,兼容IE FireFox Chrome progressbar.html <html> <meta http-equiv="Content-Ty
效果图片,兼容IE FireFox Chrome progressbar.html <html> <meta http-equiv="Content-Ty
19.2.1模拟长时间运行的Action 为了示例,首先来模拟一个运行时间长的Action:在这个Action中首先定
<!doctype html> <html> <head> <meta charset="utf-8"> <title>j
最终效果: 以下是代码解释: 1.$(#a)就是要实现进度条的那个div(关键代码) $(#a).progressbar({
在这里,总结一下loading进度条的使用简单总结一下。 一、说起进度条,必须说说条形进度条,经常都
  uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制、文件类型
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看
最近我需要制作一些简单的进度条以显示“等待状态”(就像Vista里这样: )。 Microsoft Expression B
最近我需要制作一些简单的进度条以显示“等待状态”(就像Vista里这样: )。 Microsoft Expression B
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号