说一下思路，这里用到的js方法需要有一个类似java的调度器，每隔多少秒执行一次；css方面，是一个父子标签，父标签长宽固定，子标签宽度被js控制，子标签的背景色表示进度条；
再看代码就简答多了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.process-parent {
position: absolute;
width: 400px;
border: 1px solid #ccc;
height: 10px;
border-radius: 3px;
}
.process-son {
position: relative;
background: #ff0000;
height: 100%;
font-size: 8px;
text-align: center;
color: #fff;
}
</style>
<body>
<div class="process-parent">
<div class="process-son" id="bar" style="width: 0%;">
</div>
</div>
</body>
<script type="text/javascript">
function run() {
var bar = document.getElementById("bar");
bar.style.width = parseInt(bar.style.width) + 1 + "%";
bar.innerText = bar.style.width;
if (bar.style.width == "100%") {
clearTimeout(timeout);
return;
}
var timeout = setTimeout('run()', 300);
}
window.onload = run();
</script>
</html>
想把这块代码简化下，html这边，只需要给定宽和高固定的div，js这边提供一个方法，参数为标签id，时间间隔以及每次间隔增加的百分比。
分享到：
相关推荐
本文将详细介绍如何使用CSS和JavaScript来实现这种动态效果，并通过示例页面进行演示。 一、CSS基础 首先，我们需要创建一个进度条的基本结构，通常是一个包含两个子元素的HTML结构：一个是进度条容器，另一个是...
css+js圆形进度条
脚本简介：纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效，动态加载效果，背景色动态渐变，纯css+js实现，对于简单页面实现进度条效果可以简单利用此方法。 脚本简介：纯js+css3渐变...
js 实现 CSS+JS制作的进度条! 值得下载看看!资源免费,大家分享!!
这个项目"js+html+css 实现带有进度条多附件依次上传"是针对这一需求的一个实践练习，它结合了JavaScript、HTML和CSS三种技术来创建一个用户友好的多文件上传功能，并且在上传过程中显示进度条，提升用户体验。...
【HTML+CSS实现的PK进度条】是一种常见的前端交互元素，常用于展示两个竞争者或团队的竞争进度，如游戏对战、数据比较等场景。在这个案例中，我们可以通过HTML结构和CSS样式来创建一个动态的、可视化的效果，使得...
### 使用JS+CSS实现自定义进度条的知识点详解 #### 一、背景介绍 在Web开发中，进度条是常用的一种UI元素，用于显示任务完成的状态。通过使用JavaScript（简称JS）与Cascading Style Sheets（层叠样式表，简称CSS）...
在本示例中，我们将探讨如何利用CSS3和JavaScript技术来创建这样一个动态的、可定制的环形进度条。CSS3提供了丰富的样式功能，而JavaScript则负责动态更新进度。 首先，我们来看CSS3在环形进度条设计中的作用。CSS3...
用html+js实现的本地音乐播放器，无需插件即可运行，上传音乐、上一曲、下一曲、暂停、播放、列表循环、单曲循环、随机播放、音乐时长、进度条、进度条点击跳转播放这些基本功能都有，同时还实现了音频可视化，绘制...
使用html5的canvas插件，配合css3就可以在页面上画出漂亮的环形进度条。
"用CSS+JS实现的进度条效果效果" 本文将详细讲解如何使用CSS和JS实现进度条效果，包括HTML、CSS和JS代码的编写。 首先，我们需要编写HTML代码来创建进度条的基本结构，代码如下： ``` <div id="loading"> ...
在本主题"html+js+css进度条"中，我们将深入探讨如何利用原生JavaScript、HTML和CSS来创建具有交互性的进度条。下面将详细阐述这三种技术如何协同工作以实现这一功能。 首先，HTML是构建网页结构的基础。为了创建一...
本文实例为大家分享了javascript+css实现进度条效果的具体代码，供大家参考，具体内容如下 主要是以样式实现进度条的效果，JavaScript控制显示的百分比 html模板 <span id=progress class=progress_bac></span> ...
在本主题中，“html5 css3实现的进度条”主要涉及的是使用这两种技术来创建一种视觉上吸引人的进度指示器，通常用于表示任务、数据加载或任何需要时间的过程的完成程度。下面我们将深入探讨HTML5和CSS3在制作进度条...
这个资源“一个非常不错的纯javascript+css网页进度条”提供了一种使用JavaScript和CSS实现的高效、美观的进度条解决方案，无需依赖任何外部库，非常适合那些希望在网页中添加这种功能而不想增加额外负担的开发者。...
其中，利用H5、CSS和JavaScript（JS）来开发音乐播放器是一个常见的实践，它使得用户可以直接在网页上享受音乐而无需额外的插件或应用程序。本文将深入探讨如何利用这些技术实现一个基础的音乐播放器。 一、...
在本实例中，我们将深入探讨如何使用HTML5和CSS3来实现一个具有视觉吸引力的进度条。进度条在网页中广泛应用，如文件上传、加载过程、任务进度指示等，能有效地向用户反馈操作状态。 首先，HTML5引入了一个新的元素...
"jQuery+CSS3进度条动画特效.zip" 文件包含了一种利用jQuery库和CSS3技术实现的动态进度条效果。这个组合利用了jQuery的事件处理和动态更新特性，结合CSS3的过渡和动画属性，创造出流畅且吸引人的视觉效果。 首先，...
css+js 实现简单的动态进度条效果是指通过使用 CSS3 的 animation 动画属性和 JavaScript 语言来实现一个动态的进度条效果。这个实现方法主要利用了 CSS3 的 animation 属性来设置六个动画属性，包括 animation-name...
虽然大部分现代浏览器都支持CSS3，但为了确保在所有设备上的良好体验，可以使用前缀如`-webkit-`，`-moz-`，`-ms-`等，以及考虑使用polyfill或JavaScript库如jQuery来辅助实现某些不被支持的功能。 文件结构方面，`...