JavaScript进度条设计源码实例 - zjutsoft - ITeye博客

`

zjutsoft

浏览: 460283 次
性别:
来自: 杭州

最近访客更多访客>>

hbzyb

qq528

starlxg

tianya2010ji

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

和尚啊和尚：和尚啊和尚写道这个真的详细
request 获取各种路径
和尚啊和尚：这个真的详细
request 获取各种路径
hujin19861102： ,做目视化看板！学习下先
java 操作 LED DLL 动态链接库 JNaitive
桃花源记：你这服务器结果没有处理啊，不能用的！
搜索提示 Suggest
ihopethatwell：楼主你写的这个除了查询之外关闭了数据库，创建，插入，删除的 ...
android 关系型数据库 SQLiteDatabase的增删改查

JavaScript进度条设计源码实例

博客分类：

java

JavaScript HTML

阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 进度条 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="text/html">
<META NAME="Description" CONTENT="有关windows中进度条的实现">
<style type="text/css">
#out{width:300px;height:20px;background:#EEE;}
#in{width:10px; height:20px;background:#778899;color:white;text-align:center;}
#font_color{background:yellow;text-align:center;color:white;}
</style>
</HEAD>
<BODY onload="start();" >
<div id='out'>
<div id="in" style="width:10%">10%</div>
<div>
<script type="text/javascript">
i=0;
function start()
{
ba=setInterval("begin()",100);//setInterval 返回的是一个全局变量，一个间隔数值.这个数值是表示调用setInterval的次数
}
function begin()
{
i+=1;
if(i<=100)
{
document.getElementById("in").style.width=i+"%";
document.getElementById("in").innerHTML=i+"%";}
else
{
clearInterval(ba);
document.getElementById("out").style.display="none";
document.write("<span style='background:yellow;text-align:center;color:white;'>加载成功</span>");
}
}
</script>
</BODY>
</HTML>

查看图片附件

分享到：

Struts2 入门例子 Struts2.1 权威指南 | 如何遍历 HashMap

2010-05-05 11:32
浏览 980
评论(0)
分类:编程语言
查看更多

评论

发表评论

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

相关推荐

新 ASP无组件上传带进度条（源码 + 实例）: 通过分析和学习这个源码实例，开发者可以掌握如何在ASP环境中实现文件上传和进度显示，这对于构建交互性更强的Web应用非常有帮助。同时，也可以根据自己的需求对其进行扩展和优化，比如增加多文件上传功能，或者优化...

ASP无组件上传带进度条（源码+实例）: 总的来说，这个"ASP无组件上传带进度条"的源码和实例为开发者提供了一个在ASP环境中实现文件上传和进度显示的参考，对于那些需要在ASP平台上处理大文件上传的开发者来说，是非常有价值的资源。通过学习和实践，你...

HTML5 CSS3 进度条实现实例源码完美版: 5. **响应式设计**：如果实例中包含，你还可以了解到如何使用媒体查询（media queries）使进度条适应不同屏幕尺寸的设备，实现响应式布局。 6. **JavaScript交互**：虽然主要依赖HTML5和CSS3，但部分进度条可能需要...

HTML5 CSS3 ：进度条的实现实例源码: 在本实例中，我们将深入探讨如何使用HTML5和CSS3来实现一个具有视觉吸引力的进度条。进度条在网页中广泛应用，如文件上传、加载过程、任务进度指示等，能有效地向用户反馈操作状态。首先，HTML5引入了一个新的元素...

进度条的实现实例CSS源码.rar: 本文将深入探讨如何使用CSS（层叠样式表）来实现进度条的实例，并分析提供的源码。首先，我们需要理解进度条的基本结构。一个简单的进度条通常由两部分组成：一个容器（通常是div元素）和一个填充的进度部分（也...

echarts多条进度条实现源码.zip: 然后，在JavaScript中初始化ECharts实例，并设置相应的配置项。对于多条进度条，我们可以创建多个series，每个series代表一条进度条。以下是一个基本示例，展示了如何创建两条进度条： ```javascript var option = ...

java 进度条上传源码: 在描述中提到，此源码实例是基于JSP和SWFUpload库来实现这一功能的，同时支持多文件上传。首先，JSP（JavaServer Pages）是Java平台上的动态网页技术，它允许开发者将Java代码嵌入到HTML页面中，以便在服务器端...

HTML5网速测试进度条特效源码.zip: 这个HTML5网速测试进度条特效源码结合了HTML5的新特性、JavaScript和可能的CSS3技术，实现了网速检测并以动态进度条的形式展示，对于开发者来说，这是一个很好的学习和参考实例，有助于理解现代Web开发中的实时数据...

CSS3+JS实现iOS8风格loading加载进度条特效源码.zip: 总之，这个压缩包提供了一个结合CSS3和JavaScript实现的iOS8风格加载进度条实例，对于学习和应用Web前端技术，特别是动态效果的实现，是一个很好的实践案例。开发者可以通过研究这个源码来提升自己在网页动态效果...

HTML5 SVG轻量级jQuery圆形进度条特效源码.zip: 总之，这个源码实例提供了一个学习HTML5 SVG和jQuery交互的好机会，不仅可以帮助你理解如何利用SVG创建图形，还能让你掌握如何用jQuery制作动态效果。这对于提升网页开发技能，尤其是前端特效设计能力非常有帮助。

进度条加载原代码实现显示时间: 本文将深入探讨如何使用JavaScript来实现进度条加载，并且重点介绍两种能够显示时间进度的方法。首先，我们要理解进度条的基本构成。一个简单的进度条通常包括一个容器元素（如div）和一个填充元素（如span），...

Java 文件上传带进度条源码: 总之，"Java 文件上传带进度条源码"是一个结合了Java Web开发、多线程、异步处理和前端交互的实例，对于理解和实践Java文件上传功能具有很高的参考价值。通过学习这个示例，开发者可以更好地掌握如何在实际项目中...

HTML5 canvas实现渐变色圆形进度条特效源码.zip: 在这个“HTML5 canvas实现渐变色圆形进度条特效源码”中，我们可以深入理解如何利用canvas API来构建一个具有渐变色彩的圆形进度条。首先，我们要了解canvas的基本结构。在HTML中，我们创建一个`<canvas>`元素，并...

JSP源码,图片上传,进度条,JSP图片上传实例: 在这个“JSP源码,图片上传,进度条,JSP图片上传实例”的主题中，我们将深入探讨如何使用JSP进行图片上传，并结合进度条展示上传进度。首先，图片上传功能是网站或应用程序中常见的一种交互需求。用户可以通过这种...

可自定义进度条颜色的CSS3动画进度条源码.zip: 这个“可自定义进度条颜色的CSS3动画进度条源码”提供了一种利用CSS3实现动态且色彩可定制的进度条的方法。下面我们将详细探讨这个源码中的关键知识点。首先，CSS3是层叠样式表（Cascading Style Sheets）的第三个...

《程序天下：JavaScript实例自学手册》光盘源码: 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结第 2章按钮特效 2.1 页面刷新按钮 2.2 按回车调用...

600个javascript经典实例（内含源码）: 很实用的实例：按钮事件标记表单事件表格特效菜单超链接窗口事件多功能特效进度条特效时间日期鼠标特效数组图像特效文件传输文字特效下拉框验证事件页面事件页面效果在线测试状态栏····...

HTML5+CSS3网页加载进度条的实现，下载进度条的代码实例: 描述中指出本文提供了一段具有参考价值的代码实例，说明了进度条的重要性以及应用场景，并附有代码和效果图。在HTML5和CSS3实现进度条的实践中，几个重要的知识点包括： 1. 进度条的HTML结构：通常由一个容器div...

php进度条代码实例(CProgBar Example).rar: 1. **前端HTML和JavaScript**：这部分代码负责创建进度条的HTML结构，并使用JavaScript监听用户触发的事件，如文件上传按钮点击。当事件发生时，JavaScript通过AJAX发送请求到PHP脚本。 2. **后端PHP**：PHP脚本...

Global site tag (gtag.js) - Google Analytics