作者：晴天 发表时间：2013-05-01 浏览量：11 回复：0 来源：前端体验网
闲来无事再次更新进度条,力求更接近真实,使用方便,小进度条在ajax时挺有用的.
有交流才有进步，欢迎拍砖
完整源码
javascript模拟进度条.rar (1.5 KB, 下载次数: 9)
预览效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<link href="http://img.233.com/wx/lib/art/artdialog/skins/default.css" rel="stylesheet" id="artDialog-skin"/>
<script src="http://img.233.com/wx/lib/jquery/jquery-1.8.3.min.js?v=1.8.3"></script>
<script src="http://img.233.com/wx/lib/art/artdialog/artDialog.min.js?v=5.0.3"></script>
<script src="http://img.233.com/wx/lib/art/artdialog/artDialog.plugins.min.js?v=5.0.3"></script>
<script>
/**
* 进度条
* @returns {{setTitle: Function, complete: Function, close: Function}}
*/
function miniAjaxLoading() {
__miniAjaxLoading = typeof __miniAjaxLoading == 'undefined' ? {} : __miniAjaxLoading;
var __exports;
var _loadingCount, _loadingTitle , _initSpeed = 100, _isComplete = false;
__miniAjaxLoading._loadingCount = __miniAjaxLoading._loadingCount || -1;
var jsLoadingDialog = art.dialog({
id: 'jsLoadingDialog',
title: '正在初始化……',
cancel: false,
lock: true,
fixed: true,
content: '<div style="background:#ccc; height: 3px;font-size:3px; width: 300px;border-radius: 3px" id="ajaxLoading"><div id="ajaxLoading-inner" style="background: green; height: 100%; border-radius: 3px"></div></div>'
});
function __setTitle(_title) {
_loadingTitle = _loadingTitle || _title;
jsLoadingDialog.title('[' + __miniAjaxLoading._loadingCount + '%]' + _loadingTitle);
}
function __close() {
art.dialog.get('jsLoadingDialog') && art.dialog.get('jsLoadingDialog').close();
}
function __complete(callback) {
_isComplete = true;
_initSpeed = 0;
__reset(_initSpeed, function () {
__miniAjaxLoading._loadingCount = 0;
if(callback){
callback();
}else{
__close()
}
});
return __exports;
}
function __retardAnimateFx() {
_initSpeed = Math.ceil(10 * Math.random());
__reset(_initSpeed)
}
function __reset(_initSpeed, callback) {
typeof __miniAjaxLoading.__loadingDeferred == 'number' && clearInterval(__miniAjaxLoading.__loadingDeferred);
__miniAjaxLoading.__loadingDeferred = setInterval(function () {
__animateFx(callback);
}, _initSpeed)
};
__exports = {
setTitle: __setTitle,
complete: __complete,
close: __close
}
//
typeof __miniAjaxLoading.__loadingDeferred == 'number' && clearInterval(__miniAjaxLoading.__loadingDeferred);
var __loadingInner = document.getElementById('ajaxLoading-inner');
function __animateFx(callback) {
_loadingCount = __miniAjaxLoading._loadingCount;
_loadingCount = _loadingCount + 1;
if (_loadingCount > 100) {
clearInterval(__miniAjaxLoading.__loadingDeferred);
__setTitle('加载完成');
callback && callback();
return false
}
__miniAjaxLoading._loadingCount = _loadingCount;
__setTitle();
__loadingInner.style.width = _loadingCount + '%';
if (_loadingCount == 80 && !_isComplete) {
__retardAnimateFx()
return false
}
}
__miniAjaxLoading.__loadingDeferred = setInterval(function () {
__animateFx();
}, _initSpeed);
return __exports;
}
//
$(function () {
miniAjaxLoading().setTitle('正在抽题中……');
//over
setTimeout(function () {
miniAjaxLoading().setTitle('正在加载试题内容……');
}, 4000)
setTimeout(function () {
miniAjaxLoading().complete(function(){
//回调函数 默认关闭提示窗口
alert('over')
}).setTitle('加载完成，正在初始化……');
}, 8000)
})
</script>
</head>
<body>
</body>
</html> 
