基于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>
分享到：
相关推荐
【标题】：“简单的进度条模拟.zip”所包含的是一个关于如何使用HTML和JavaScript在网页上创建简单进度条的示例项目。这个项目的核心是利用这两种技术来动态展示数据处理或加载的状态，为用户提供视觉反馈。 【描述...
本文将详细介绍如何使用JavaScript（JS）来模拟实现一个上传进度条，无需后台页面参与，但需注意服务器环境对跨域策略的影响。 首先，我们需要明白，前端的文件上传通常涉及两个主要步骤：选择文件和发送文件数据到...
在这个"JS模拟进度条.zip"压缩包中，可能包含了一个名为"jiaoben18598"的文件，这可能是实现进度条功能的源代码或示例。 在JavaScript中，模拟进度条通常涉及以下几个关键知识点： 1. **HTML结构**：首先，我们...
"js 进度条"是使用JavaScript编程语言实现的这类动态效果，通过改变HTML元素的样式或属性来模拟进度的变化。 在压缩包中，我们可以看到以下几个文件： 1. `1.gif`、`3.jpg`、`3Bg.jpg`、`2.jpg`：这些通常是进度条...
本教程将详细讲解如何使用jQuery库来模拟页面加载进度条。 首先，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery的易用性和丰富的功能使其成为创建动态网页的强大...
JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，包括交互性、动态更新以及各种视觉效果的实现。在本文中，我们将深入探讨如何使用JavaScript来创建一个进度条，并实现同步增长的效果。...
在这个“JS 模拟上传进度条”的示例中，我们将探讨如何使用JavaScript实现这个功能。 首先，我们需要理解上传进度条的基本原理。在HTML5中，`<input type="file">`元素提供了文件选择的功能，而FileReader API则...
"伪进度条"是利用JavaScript实现的一种视觉效果，它并不直接与后台进程关联，而是通过模拟进度来提供用户体验上的反馈。这种特效可以增加用户对网站交互的感知，提高其满意度。下面我们将详细讨论如何使用JavaScript...
通过上述方法，我们可以创建一个高度可定制且功能强大的JavaScript进度条组件，适用于各种网页应用。无论是在文件上传、数据加载还是长时间运算的场景中，都能提供优秀的用户体验。这个"js完美进度条"的实现，无疑是...
JavaScript模拟进度条,供大家一起共同分享学习。
总的来说，"js一个非常实用好看得进度条"项目提供了一个方便的工具，它结合了JavaScript的动态性与CSS的视觉表现力，创建出了一款适应多种现代浏览器的进度条组件。开发人员可以根据自己的需求对其进行自定义，以...
创建一个JavaScript进度条主要涉及以下几个关键知识点： 1. HTML基础结构：首先，我们需要在HTML中创建一个代表进度条的基础结构，通常是一个`<div>`元素，用CSS进行样式定义，如宽度、高度、背景色等。进度条内的...
JavaScript负责动态更新这个`<div>`的宽度，模拟数据加载的进度。 `jquery-1.4.4.min.js`是jQuery库的一个旧版本，它提供了一系列方便的DOM操作和事件处理方法。使用jQuery，我们可以简化JavaScript代码，轻松地...
本文将深入探讨如何使用JavaScript（js）、HTML和JavaServer Pages（jsp）来创建一个美观的进度条。 首先，我们需要了解HTML的基础结构。HTML是构建网页的基本语言，用于定义页面的结构。为了创建一个进度条，我们...
在JavaScript编程中，椭圆进度条效果是一种常见的用户界面元素，用于展示任务或过程的进度。这个效果可以增强用户体验，因为它以图形化的方式提供实时反馈。在这个“javascript 椭圆进度条效果代码”中，我们可以...
在JavaScript（JS）中实现进度条功能是一种常见的前端交互设计，它可以为用户展示任务执行的进度，提升用户体验。本文将详细讲解如何使用JS来创建一个动态的进度条，并分享一些关键的技术点。 首先，我们需要明白...
在JavaScript中，模拟进度条特效是一项常见的前端开发任务，它能为用户界面提供动态反馈，增强用户体验。在本文中，我们将深入探讨如何使用JavaScript来创建一个功能丰富的进度条特效。 首先，进度条通常由HTML元素...
本文将详细解析如何利用PHP和JavaScript（JS）结合实现文件上传过程中的进度条操作，这不仅提升了用户交互体验，还使得整个上传过程更加透明可控。 ### PHP与JS实现进度条的原理 在Web应用中，文件上传通常是由...
本教程将详细介绍如何在编程中实现进度条的简单使用以及自定义其显示风格。 首先，让我们从进度条的基本使用开始。在许多编程环境中，如Python的tqdm库、Java的JProgressBar或JavaScript的HTML5 Progress Element，...
在本示例中，我们将探讨如何利用CSS3和JavaScript技术来创建这样一个动态的、可定制的环形进度条。CSS3提供了丰富的样式功能，而JavaScript则负责动态更新进度。 首先，我们来看CSS3在环形进度条设计中的作用。CSS3...