`
fkyq01
  • 浏览: 38520 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

js进度条类

    博客分类:
  • js
CSS 
阅读更多

纯gif的虚假滚动条类:

var ProcessBar = {
mask: null,
message: null,
initialize: function () {
    this.mask = document.createElement("DIV");
this.mask.className = "mask";
document.body.appendChild(this.mask);

this.message = document.createElement("DIV");
this.message.className = "message";

var text = document.createElement("DIV");
text.id = "message";
text.className = "message-text";
text.appendChild(document.createTextNode("Processing..."));
this.message.appendChild(text);

var bar = document.createElement("DIV");
bar.className = "icon-progress";
this.message.appendChild(bar);

document.body.appendChild(this.message);
    },
    show: function(message, mask) {
    if (message) {
    document.getElementById('message').firstChild.nodeValue = message;
    }
    if (mask) {
        this.mask.style.display = 'block';
    }
    this.message.style.display = 'block';
    },
    hidden: function() {
    this.mask.style.display = 'none';
    this.message.style.display = 'none';
    }
};


css 给出个背景图片
.icon-progress {
    width: 320px;
    height: 15px;
    background: url(../Images/progressbar.gif);
}
分享到:
评论

相关推荐

    JS进度条类模块示例

    `Processbar.js`则是JavaScript源代码文件,其中定义了进度条类。 在`Processbar.js`中,我们通常会看到一个名为`ProgressBar`的构造函数,该构造函数接受一些初始化参数,如进度条ID、初始值、最大值等。构造函数...

    javascript进度条实例 进度条加载实例

    javascript进度条实例 进度条加载实例

    js进度条大全,总有一款适合您

    "js 进度条"是使用JavaScript编程语言实现的这类动态效果,通过改变HTML元素的样式或属性来模拟进度的变化。 在压缩包中,我们可以看到以下几个文件: 1. `1.gif`、`3.jpg`、`3Bg.jpg`、`2.jpg`:这些通常是进度条...

    通过js实现百分比进度条

    本篇文章将深入探讨如何使用JavaScript(JS)、HTML和CSS来实现一个动态的百分比进度条。首先,我们需要理解这三种技术在构建进度条中的角色。 **HTML**:HTML(超文本标记语言)用于构建页面的基本结构。在这里,...

    JS进度条,实现同步增长效果

    例如,可以添加一个CSS类来表示进度增加时的状态,并在JavaScript中动态切换这个类: ```css #myProgressBar.active { transition: width 1s; /* 这里设置一个1秒的过渡动画 */ } ``` ```javascript progressBar....

    增强 进度条 类

    标题“增强进度条类”暗示我们讨论的是对原生进度条控件的功能进行扩展和改进的自定义类。这类增强通常涉及到更多的定制选项,如颜色、样式以及更灵活的进度控制。 进度条自绘是指程序员通过编写代码来绘制进度条的...

    nanobar-轻量级纯js进度条插件.zip

    `nanobar.js` 是一个专门为这个目的设计的轻量级、纯 JavaScript 的进度条插件。它具有小巧的体积,对旧版本浏览器(如 IE8)的良好兼容性,以及易于使用和自定义的特点,使得开发者能够轻松地在项目中集成进度条...

    简单的js进度条

    简单的js进度条,在网络加载时使用,做过渡效果 ,非常适合新手学习参考

    JS导excl和js进度条

    在JavaScript(JS)开发中,有时我们需要处理与Excel文件的交互以及实现动态进度条功能。本文将详细探讨这两个主题,并提供相关的技术要点和实践方法。 首先,让我们关注JS导出Excel这一需求。在Web应用程序中,...

    JavaScript制作进度条实例

    JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例JavaScript制作进度条实例

    js进度条

    创建一个JavaScript进度条涉及到以下几个关键知识点: 1. HTML结构:首先,你需要在HTML中创建一个基础的进度条结构,通常是一个`<div>`元素,设置相应的CSS样式来定义进度条的基本外观。例如: ```html ...

    css+js动态进度条的实现

    通过CSS和JavaScript,我们可以创建出富有交互性和视觉吸引力的动态进度条,为用户提供实时的进度反馈。这包括设置基本样式、使用JavaScript动态更新进度以及实现各种特效。实际应用中,动态进度条能够提升用户体验...

    js完美进度条,做效果的不二选择

    通过上述方法,我们可以创建一个高度可定制且功能强大的JavaScript进度条组件,适用于各种网页应用。无论是在文件上传、数据加载还是长时间运算的场景中,都能提供优秀的用户体验。这个"js完美进度条"的实现,无疑是...

    JavaScript 进度条

    JavaScript 进度条 用IE打开 JavaScript 进度条 用IE打开 JavaScript 进度条 用IE打开

    用javascript实现进度条

    用javascript实现进度条----

    伪进度条(js特效)

    "伪进度条"是利用JavaScript实现的一种视觉效果,它并不直接与后台进程关联,而是通过模拟进度来提供用户体验上的反馈。这种特效可以增加用户对网站交互的感知,提高其满意度。下面我们将详细讨论如何使用JavaScript...

    js圆形进度条css圆形进度条.zip

    "js圆形进度条css圆形进度条.zip"是一个压缩包,包含了实现圆形进度条效果的资源,适用于JavaScript(js)和CSS(css)技术。这个圆形进度条设计允许用户自定义样式,并且具有良好的浏览器兼容性,支持IE8及以上版本...

    loading进度条类素材

    "loading进度条类素材"的标题暗示了这是一组与加载动画相关的图形资源,主要用于展示应用程序或网页内容加载的过程,给予用户反馈,让他们知道系统正在处理请求而不会感觉被忽视。这些素材通常为GIF格式,因为GIF...

    JS加载flash进度条

    2. **创建JavaScript进度条**: 在HTML页面中,你需要创建一个进度条元素,如`<progress>`或自定义CSS样式。同时,编写JavaScript代码来接收Flash发送的进度信息并更新进度条。 ```html ...

    纯js+css3渐变进度条动画特效

    脚本简介:纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效,动态加载效果,背景色动态渐变,纯css+js实现,对于简单页面实现进度条效果可以简单利用此方法。 脚本简介:纯js+css3渐变...

Global site tag (gtag.js) - Google Analytics