单一的进度条
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="jquery-1.7.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>进度条</title>
<style type="text/css">
.graph{
width:150px;
border:1px ridge silver;
border-radius:20px;
height:10px;
}
.bar{
display:block;
background:highlight;
float:left;
height:100%;
border-radius:20px;
text-align:center;
}
</style>
<script type="text/javascript">
var barInterval;
function go(){
var yWidth=$("#bar1").css("width");
var ywIndex=yWidth.indexOf('px');
yw=yWidth.substring(0,ywIndex);
yw=parseInt(yw)+1;
$("#bar1").css("width",yw+"px");
if($("#bar1").css("width")=='150px'){
window.clearInterval(barInterval);
}
}
function jdt(){
barInterval=window.setInterval("go()",30);
}
function tt(){
jdt();
}
</script>
</head>
<body>
<div class="graph">
<strong id="bar1" name='bar' style="width:0px;" class='bar'></strong>
</div>
<button onclick="tt()">开始</button>
</body>
</html>
单一的进度条
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="jquery-1.7.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>进度条</title>
<style type="text/css">
.graph{
width:150px;
border:1px ridge silver;
border-radius:20px;
height:10px;
}
.bar{
display:block;
background:highlight;
float:left;
height:100%;
border-radius:20px;
text-align:center;
}
</style>
<script type="text/javascript">
var barList={};
function go(barId){
var yWidth=$("#"+barId).css("width");
var ywIndex=yWidth.indexOf('px');
yw=yWidth.substring(0,ywIndex);
yw=parseInt(yw)+1;
$("#"+barId).css("width",yw+"px");
if($("#"+barId).css("width")=='150px'){
window.clearInterval(barList[barId]);
}
}
function jdt(){
var _bars=$("strong[name='bar']");
$(_bars).each(function(i,_bar){
var barId=$(_bar).attr('id');
barList[barId]=window.setInterval("go('"+barId+"')",30);
});
}
function tt(){
jdt();
}
</script>
</head>
<body>
<div class="graph">
<strong id="bar1" name='bar' style="width:0px;" class='bar'></strong>
</div>
<div style='height:35px;'>
<hr>
</div>
<div class="graph">
<strong id="bar2" name='bar' style="width:0px;" class='bar'></strong>
</div>
<button onclick="tt()">开始</button>
</body>
</html>
分享到：
相关推荐
在UI设计中，进度条是常见的一种用户界面元素，它用于指示某个操作的进度或状态。"渐变进度条 美化进度条"这个主题着重于如何通过使用渐变色彩来提升进度条的视觉效果，使其看起来更加美观且舒适。渐变色的设计不仅...
在处理大量数据或者执行耗时操作时，为用户提供一个进度条是非常有用的，可以提高用户体验，显示数据加载或处理的状态。本文将详细介绍如何在C#中为`DataGridView`添加进度条功能。 首先，我们需要引入`ProgressBar...
在网页设计和用户体验领域，动态加载进度条是一个重要的元素，它能够向用户显示数据或内容正在加载的过程，提高用户对系统响应的认知，并提供更舒适的等待体验。标题提到的"80个GIF进度条"是一套丰富的资源集合，...
在C#编程中，自定义进度条是一种常见且实用的需求，它可以为用户提供视觉反馈，显示应用程序执行任务的进度。本文将深入探讨如何在C#中实现各种自定义进度条，包括圆滑的、多边形的等不同设计样式，并提供相关的控件...
"无尽的进度条3.0"是一款专为用户界面设计打造的动态进度条效果工具。这个工具可能被开发者或设计师用于创建具有视觉吸引力的、持续不断的加载效果，以提高用户体验。在某些应用中，例如数据加载、上传或下载过程中...
在IT行业中，尤其是在软件开发领域，进度条是一个非常常见的用户界面元素，它为用户提供了一种可视化的方式来了解某个任务的执行进度。在这个名为“NC65进度条功能.rar”的压缩包中，我们关注的是如何在NC65环境中...
在编程领域，进度条是一种常见的用户界面元素，用于表示任务执行的进度，为用户提供操作反馈。易语言（E语言）是中国本土开发的一种简单易学的编程语言，它以直观的汉字作为关键字，使得非计算机专业人员也能快速...
在Windows Presentation Foundation（WPF）中，开发人员可以利用丰富的图形功能来创建各种自定义控件，其中之一就是圆形进度条。这种控件通常用于显示任务的进度，它以环形的方式展示，既美观又直观。在本文中，我们...
在Android开发中，进度条（Progress Bar）是一种常见的UI组件，用于显示某个操作的进度或者加载状态。在标题“带有文本的进度条”中提到的，这种进度条不仅具有显示进度的功能，还能够结合文本内容，提供更丰富的...
本项目专注于创建两种特殊的进度条控件：圆形进度条和环形进度条，这些控件适用于展示任务或进程的进度，视觉效果独特，能吸引用户注意力。通过VS2017开发，它们可以直接在WinForm应用中编译并运行，为用户提供实时...
用两个方法实现进度条，切换，最小化恢复窗口，进度条正常，不假死！请用Microsoft Visual Studio 2008打开，或先执行EXE看看是否是自己需要的！ 注： 下载资源时，看清楚此文档说明，我不是为了积分而放在这里，我...
QT实现的特色进度条是一种在GUI（图形用户界面）应用中提供反馈的创新方式，它模仿了地铁站的进度灯效果，为用户提供一种视觉上吸引人的进度指示。Qt是一个跨平台的C++库，用于创建桌面、移动以及嵌入式设备上的应用...
在网页设计和开发中，进度条是一个非常重要的交互元素，它能够给用户反馈操作的状态，如文件上传、数据加载或任务执行的进度。本资源"12款进度条脚本demo"显然是一份集合了多种进度条实现方式的示例集，主要关注CSS...
Android SDK 提供了多种类型的进度条，包括HorizontalProgressBar（水平进度条）和CircularProgressBar（圆形进度条）。在这个场景下，我们可以选择自定义一个水平进度条，通过改变其高度来模拟上下滚动的效果。 1....
本文将深入探讨如何实现一个自定义的条形方格进度条，包括横置和竖置两种显示方式，并允许用户自定义底色、进度颜色、是否显示进度值以及字体大小。这个控件是基于GDI+图形接口进行绘制的，具有高度的灵活性和可定制...
标题中的“BAT批处理脚本-提示窗口进度条-娱乐进度条.cmd.zip”指的是一个包含批处理脚本的压缩文件，主要用于在Windows操作系统中展示一个带有进度条的提示窗口。批处理脚本（BAT）是基于DOS或Windows环境下的一种...
在Windows Forms（WinForm）开发中，用户界面的构建是至关重要的，而进度条控件是一种常见的元素，用于展示任务的执行进度。在传统的WinForm应用中，进度条通常是水平显示的，但有时为了满足界面设计的需求或者提高...
### C++ MP3播放器进度条创建 #### 知识点概述 本文旨在介绍如何在C++环境下，特别是在Microsoft Visual C++（以下简称VC++）中使用MFC框架创建MP3播放器的进度条。进度条作为一种重要的用户界面元素，不仅能够...
在C#编程中，创建一个具有渐变色的自定义进度条可以提升用户界面的美观性和用户体验。渐变色进度条不仅能够展示进度，还能通过颜色的变化为用户提供更直观的反馈。下面我们将深入探讨如何利用C#实现这样一个功能，并...
在UGUI中，开发者可以创建各种复杂的UI元素，包括按钮、文本、图像以及今天的主角——进度条。本教程将详细介绍如何使用Unity和UGUI来创建一个圆形进度条，并探讨其在进度指示和拖拽验证码功能上的应用。 一、UGUI...