`
化蝶自在飞
  • 浏览: 2338657 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

进度条代码 分享一个不错的进度条代码

HTML 
阅读更多
进度条代码如下: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- #BeginTemplate "/Templates/Js.dwt" -->
<HEAD>
<!-- #BeginEditable "doctitle" -->
<TITLE>模拟进度条</TITLE>
<!-- #EndEditable -->
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<LINK  href="../../fav.ico" rel="shortcut icon">
<STYLE type=text/css>BODY {
MARGIN: 25px 25px 25px
}
#all TD {
FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"
}
INPUT {
FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"
}
SELECT {
FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"
}
P {
FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"
}
TEXTAREA {
FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"
}
#all A:active {
COLOR: #7d070c
}
#all A:visited {
COLOR: #7d070c
}
#all A:hover {
COLOR: #336699
}
#all A:link {
COLOR: #7d070c
}
</STYLE>
<SCRIPT language=JavaScript>
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function JM_cc(ob){
var obj=MM_findObj(ob); if (obj) {
obj.select();js=obj.createTextRange();js.execCommand("Copy");}
}
function MM_findObj(n, d) { //v4.0
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
//-->
</SCRIPT>
<META content="MSHTML 5.50.4134.600" name=GENERATOR>
</HEAD>
<BODY id=all text=#000000 bgColor=#336699>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR bgColor=#ffffff>
<TD><IMG src="../images/sq_1.gif" width=11 height="14"></TD>
<TD width="100%"></TD>
<TD><IMG src="../images/sq_2.gif"    width=11 height="14"></TD>
</TR>
</TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR bgColor=#ffffff>
<TD><IMG src="../../images/space.gif" width=11 height="1"></TD>
<TD width="100%">
<table width="100%" border="0" cellpadding="8">
<tr>
<td align="center">
<script language="JavaScript">
document.write("<font color=#7d070c style=\"font-size: 14px\">"+document.title+"</font>");
</script>
</td>
</tr>
<tr>
<td bgcolor="#f7f7f7"><!-- #BeginEditable "example" -->
<style>
<!--
#bar, #barbackground{
position:absolute;
left:0;
top:0;
background-color:blue;
}
#barbackground{
background-color:black;
}
-->
</style>
<script language="JavaScript1.2">
/*
Dynamic Progress Bar- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/
//1) Set the duration for the progress bar to complete loading (in seconds)
var duration=5
//2) Set post action to carry out inside function below:
function postaction(){
//Example action could be to navigate to a URL, like following:
//window.location="http://www.dynamicdrive.com"
}
///Done Editing/////////////
var clipright=0
var widthIE=0
var widthNS=0
function initializebar(){
if (document.all){
baranchor.style.visibility="visible"
widthIE=bar.style.pixelWidth
startIE=setInterval("increaseIE()",50)
}
if (document.layers){
widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
document.baranchorNS.document.barNS.clip.right=0
document.baranchorNS.visibility="show"
startNS=setInterval("increaseNS()",50)
}
}
function increaseIE(){
bar.style.clip="rect(0 "+clipright+" auto 0)"
window.status="Loading..."
if (clipright<widthIE)
clipright=clipright+(widthIE/(duration*20))
else{
window.status=''
clearInterval(startIE)
postaction()
}
}
function increaseNS(){
if (clipright<202){
window.status="Loading..."
document.baranchorNS.document.barNS.clip.right=clipright
clipright=clipright+(widthNS/(duration*20))
}
else{
window.status=''
clearInterval(startNS)
postaction()
}
}
window.onload=initializebar
</script>
<script language="JavaScript1.2">
if (document.all){
document.write('<div id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')
document.write('<div id="barbackground" style="width:200px;height:20px;z-index:9"></div>')
document.write('<div id="bar" style="width:200px;height:20px;z-index:10"></div>')
document.write('</div>')
}
</script>
<ilayer name="baranchorNS" visibility="hide" width=200 height=20>
<layer name="barbackgroundNS" bgcolor=black width=200 height=20 z-index=10 left=0 top=0></layer>
<layer name="barNS" bgcolor=blue width=200 height=20 z-index=11 left=0 top=0></layer>
</ilayer>
提示:如果你看不到效果，请刷新页面 <a href="http://www.k686.com">k686绿色软件</a><!-- #EndEditable --></td>
</tr>
</table>
</body></html>

进度条代码
分享到：
| 网页下载速度慢?来测试测试网页下载速度
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    WEB进度条代码，B/S进度条代码

    根据给定文件的信息，本文将围绕“Web进度条代码”这一主题进行深入探讨，并结合HTML、CSS以及可能涉及的一些JavaScript技术来实现一个简单的B/S架构下的进度条展示效果。 ### Web进度条概述 Web进度条在网站开发...

    动态css进度条代码（闪烁跳动的进度条）.zip

    这个示例采用了结构性伪类选择符E:nth-child(n)，来进行对HTML元素的选择以及控制输出。相信这个伪类选择符在将来会是一个很强大的一个工具。 动态css进度条代码效果图一： 点击查看...动态css进度条代码效果图二：

    jquery可控制调节进度条代码.zip

    在本项目中，"jquery可控制调节进度条代码.zip" 提供了一个使用jQuery库实现的交互式进度条组件。这个组件允许用户通过点击来调整进度条的进度，并且能够显示当前进度的百分比。在JavaScript特效领域，这种功能通常...

    进度条代码js

    进度条代码js

    HTML5 SVG百分比进度条代码.zip

    考虑到现代网页设计需要适应各种屏幕尺寸，这个进度条代码可能会包含响应式设计。这可以通过使用媒体查询（media queries）或者自适应布局技术实现，确保在不同设备上都有良好的显示效果。 6. **性能优化**： ...

    海康威视二次开发回放进度条代码

    本篇将深入探讨如何针对海康威视的视频回放功能实现一个自定义的进度条代码，以供按时间播放和点击跳转功能。 首先，我们需要了解海康威视的SDK（Software Development Kit），它是提供给开发者用来与海康威视设备...

    JavaScript实现网页加载进度条代码超简单

    网页进度条能够更好的反应当前网页的加载进度情况，loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是目前的浏览器并没有提供页面加载进度方面的接口，也就是说页面还无法准确返回页面实际加载...

    ios圆形进度条代码

    "ios圆形进度条代码"就是一个专门针对iOS平台，适用于版本5.0及以上的圆形进度条实现。这种组件通常用于展示任务完成度或者加载状态，为用户提供了视觉上的反馈。 在iOS中，我们可以使用多种方式来实现圆形进度条。...

    JAVA进度条源代码

    在运行上述代码之前，确保你已经在NetBeans环境中创建了一个新的Java Application（如JavaApplication2），并把进度条相关的代码添加到主窗口的初始化方法中。另外，描述中提示要替换文件名并将文件放入解压的文件夹...

    qt动态进度条源代码.7z

    在本压缩包“qt动态进度条源代码.7z”中，我们重点关注的是“ProgressBar”这个子文件，它可能包含了一个实现动态进度条效果的示例代码。 动态进度条在用户交互中起着至关重要的作用，因为它可以提供实时反馈，让...

    jQuery滑动加载进度条代码.zip

    本资源"jQuery滑动加载进度条代码.zip"提供了一个实现动态进度条加载特效的代码实例，特别适用于网页加载过程中显示进度，提升用户体验。 首先，进度条在网页应用中扮演着重要角色，它可以让用户了解当前操作的进度...

    HTML5 SVG饼状图形进度条代码.zip

    在本案例中，“HTML5 SVG饼状图形进度条代码”是一个利用这两项技术实现的实用组件，特别适用于展示进度或加载状态。 SVG是一种在网页上绘制图形的XML格式，它可以提供清晰的分辨率独立的图像，无论屏幕大小如何都...

    jQuery会员等级消费进度条代码.zip

    本项目“jQuery会员等级消费进度条代码”是针对网站或应用程序中的会员系统设计的一种交互式视觉元素，它能动态展示用户的消费进度，以便用户直观了解自己的会员等级提升情况。 这个代码实现的核心功能是创建一个...

    jQuery网页步骤流程进度条代码

    本资源"jQuery网页步骤流程进度条代码"正是基于jQuery实现的，用于在网页上呈现多步骤流程的进度指示。 要理解这个代码的工作原理，首先需要了解jQuery的基本用法。jQuery通过$函数作为入口，可以快速选择DOM元素、...

    页面转向的进度条 代码

    本文将深入解析一个具体的页面转向进度条代码示例，帮助读者理解其工作原理，并能够根据实际需求进行调整。 #### 二、HTML结构分析 首先来看一下这个进度条的HTML结构： ```html &lt;p&gt;&lt;font color="#0000ff"&gt; ...

    带进度条的文件上传源代码

    具体到这个“带进度条的文件上传源代码”，它利用AJAX和DWR实现了一个动态更新的进度条，用户选择文件后，前端会立即显示一个进度条，展示文件上传的百分比。这个过程是通过监听HTTP请求的进度事件完成的，当服务器...

    jQuery数据加载进度条代码.zip

    总的来说，"jQuery数据加载进度条代码"是一个实用的资源，它演示了如何结合jQuery和CSS3来创建动态的用户体验，特别是在处理数据加载场景时。开发者可以通过学习和修改这个代码，为自己的项目添加类似的进度条功能，...

    jQuery绿色简洁动态进度条代码.zip

    综上所述，这个jQuery绿色简洁动态进度条代码示例是一个很好的学习资源，可以帮助开发者掌握如何利用jQuery和基本的前端技术实现动态效果。通过研究这个项目，你可以了解到前端开发中的交互设计、事件处理、CSS样式...

    vc++进度条例子分享

    "vc++进度条例子分享"这个主题是关于如何在C++环境中使用MFC的CProgressCtrl类来创建和管理进度条的示例代码。 CProgressCtrl是MFC库中的一个控件类，用于封装Windows API中的进度条控件（ ProgressBar Control）。...

    jQuery仿造星球大战激光剑效果水平进度条代码

    这段代码会在页面加载完成后开始执行，设置一个定时器来逐步增加进度条的宽度，直到达到100%，然后停止动画。 在`fonts`文件夹中，可能包含了用于增强视觉效果的自定义字体，这些字体可能用于进度条的文字提示或者...

Magicbox
Global site tag (gtag.js) - Google Analytics