`
jiayj198609
  • 浏览: 149840 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

进度条实例

    博客分类:
  • JSP
 
阅读更多
<HTML>
<HEAD>
<TITLE>进度条实例</TITLE>
<!--进度条-->
<STYLE type=text/css>
#loader_container {
LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 30%; TEXT-ALIGN: center;
}
#loader {
BORDER-RIGHT: #99cc00 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #99cc00 1px solid; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 11px; Z-INDEX: 10; PADDING-BOTTOM: 16px; MARGIN: 0px auto; BORDER-LEFT: #99cc00 1px solid; WIDTH: 200px; COLOR: #000000; PADDING-TOP: 10px; BORDER-BOTTOM: #99cc00 1px solid; FONT-FAMILY: Tahoma, Helvetica, sans; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left;
}
#progress {
FONT-SIZE: 1px; LEFT: 0px; WIDTH: 1px; POSITION: relative; TOP: 1px; HEIGHT: 10px; BACKGROUND-COLOR: #009900;
}
#loader_bg {
FONT-SIZE: 1px; LEFT: 8px; WIDTH: 180px; POSITION: relative; TOP: 8px; HEIGHT: 12px; BACKGROUND-COLOR: #e4e7eb;
}
</STYLE>

<SCRIPT language=JavaScript>
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate(){
var elem = document.getElementById('progress');
if(elem != null) {
  if (pos==0) len += dir;
  if (len>32 || pos>148) pos += dir;
  if (pos>148) len -= dir;
  if (pos>148 && len==0) pos=0;
  elem.style.left = pos;
  elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
</SCRIPT>
<!--//进度条-->
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<LINK href="loading.files/style.css" type=text/css rel=stylesheet>
<BODY leftMargin=0 topMargin=1 onload=remove_loading();>
<!--进度条-->
<DIV id=loader_container>
<DIV id=loader>
  <DIV align=center>加载中,请稍等 ...</DIV>
  <DIV id=loader_bg>
   <DIV id=progress></DIV>
  </DIV>
</DIV>
</DIV>
<!--//进度条-->
<iframe src="http://news.sohu.com" height="500"></iframe>
</BODY>
</HTML>



分享到:
评论

相关推荐

    C#进度条实例源码

    在C#编程中,进度条(ProgressBar)是一个常见的...这个C#进度条实例源码可以帮助开发者了解如何在实际项目中使用进度条,提升用户体验,并提供了一个实际操作的起点。无论是初学者还是有经验的开发者,都能从中受益。

    Android进度条实例测试

    在Android开发中,进度条(ProgressBar)是一种常见的UI组件,用于显示...以上就是Android进度条实例测试中的关键知识点。通过理解并实践这些内容,开发者能够更好地在Android应用中实现进度显示功能,提升用户体验。

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

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

    C#多线程进度条实例

    总之,"C#多线程进度条实例"是一个关于如何在C#中利用多线程进行耗时操作,并实时更新UI进度条的实践示例。它涉及到线程的创建、UI的同步更新以及可能的暂停、恢复和取消功能。通过理解和应用这些知识点,开发者可以...

    JavaScript制作进度条实例

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

    读文件和进度条实例读文件和进度条实例

    读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读文件和进度条实例读...

    QT 自定义进度条实例

    QT自定义进度条实例是一个基于QT框架的编程项目,旨在展示如何通过自定义样式和功能来创建美观且实用的进度条组件。QT是一个跨平台的C++图形用户界面应用程序开发框架,广泛应用于桌面、移动以及嵌入式系统。在本...

    ExtJs实现进度条实例

    在"ExtJs实现进度条实例"中,我们可以学习如何在ExtJs应用中创建和使用进度条组件。进度条在ExtJs中被封装在`Ext.ProgressBar`类中,它提供了多种样式和功能,如动态更新、文本信息显示等。以下是一些关键知识点: ...

    下载进度条实例+代码+说明

    标题中的“下载进度条实例+代码+说明”指的是一个实现下载功能并带有进度显示的程序示例,通常在开发过程中,这种组件用于提供用户友好的界面,让用户了解文件下载的状态。这种实例对于开发者来说非常有价值,因为它...

    ExtJs实现进度条实例.htm

    本文将深入探讨如何使用ExtJs实现一个进度条实例。 首先,我们需要了解ExtJs中的ProgressBar组件。ProgressBar是ExtJs提供的一种专门用于显示进度的控件,它允许你创建静态或动态的进度条,可以显示百分比或自定义...

    swfupload多文件上传带进度条实例

    **SWFUpload 多文件上传带进度条实例详解** SWFUpload 是一款开源的JavaScript库,专门用于在网页上实现文件的多选上传,并且支持显示上传进度条,为用户提供更好的交互体验。在这个实例中,我们将探讨如何在VS2012...

    springmvc图片上传带进度条实例

    总结来说,创建一个Spring MVC中的图片上传带进度条实例,主要涉及以下几个步骤:1)配置Spring MVC以支持文件上传;2)编写控制器处理上传请求;3)实现`ProgressListener`监听文件上传进度;4)在前端使用Ajax和...

    iphone 程序进度条实例

    "iPhone程序进度条实例"是一个很好的学习资源,它聚焦于如何在应用程序中实现用户友好的等待界面,以提高用户体验。在这个实例中,开发者会学习如何利用UIActionSheet和UIProgressView两个关键的UIKit组件来创建一个...

    jquery圆形进度条实例

    在本文中,我们将深入探讨如何使用jQuery实现一个圆形进度条实例。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果。在“圆形进度条”这个场景下,我们通常会结合CSS3和HTML5来创建一个美观...

    静态jqery的进度条实例

    这个静态jQuery进度条实例简单易用,可以根据实际需求进行定制,比如添加动画效果、调整颜色或样式。通过这种方式,你可以为用户提供更友好的交互体验,让他们在等待过程中有更好的感知。 在压缩包中的"progressBar...

    一个有问题的进度条实例

    "一个有问题的进度条实例"可能指的是在某个应用程序或网站中,进度条的显示或功能存在错误或异常,这可能涉及到多个技术层面的问题。 1. **ASP.NET基础知识**: 这个实例涉及到了ASP.NET,这是一个微软开发的用于...

    Android一个改进的进度条实例

    这是一个改进版的android进度条实例,本实例中,进度条在进度过程中,会在进度条中显示相应的进度百分比,而且该百分比的显示位置会根据你当前的进度点位置而自动变换位置,要么显示在左边,要么显示在右边,非常...

Global site tag (gtag.js) - Google Analytics