JavaScript-javascript做的进度条程序
网上看到很多进度条都是由flash完成的，现在想那位大侠分享一个纯javascript做的进度条程序，需要和程序真正挂钩的...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
网上看到很多进度条都是由flash完成的，现在想那位大侠分享一个纯javascript做的进度条程序，需要和程序真正挂钩的...
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（10）
如果想和真实程序挂钩的话，那么可以用在php中调用js，如下方法：
ob_start();
ob_implicit_flush(1);
set_time_limit(0);
$page = <<<PAGE
loading(<span id="percent">0%</span>)...<br /><div style="width:400px;height:30px;border:#000000 solid 1px;">
<div id="loading" style="background:#0000FF;width:1px;height:30px;"></div></div>
<script type="text/javascript">
function setLine(value){
var obj = document.getElementById("loading");
document.getElementById("percent").innerHTML = Math.ceil(parseInt(obj.style.width) /400 * 100) + "%";
obj.style.width = value + "px";
}
setLine(0);
</script>
PAGE;
echo $page.str_repeat(' ',256);
flush();
ob_flush();
function line($i){
echo '<script> setLine('.$i.');</script>' .str_repeat(" ",256);
flush();
ob_flush();
}
//模拟程序
for($j = 1; $j <= 400; $j++) {
//在程序的片段中调用line();
line($j);
//为了效果明显，这里模拟程序执行时间
usleep(rand(1000,80000));
}
这里有一个页面加载过程中的进度条，当页面进度条到100%时就会跳到指定网页
<html>
<head>
<title>测试转发一下</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="overflow-x:hidden;overflow-y:hidden">
<div id="adslxp" style="display: none" width="100%" height="100%"><iframe src="http://www.baidu.com" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"></iframe></div>
<!========================载入进度条========================>
<div id=ld>
<table width=100% height=90%><tr><td align=center>
<center>
<h1>正在载入 <font color=red>测试转发一下</font> 请稍侯...</h1>
<table width=40%><tr><td align=left>
<table id=lpc bgcolor=blue><tr><td> </td></tr></table>
</td></tr></table>
<br><br><br>
</center>
</td></tr></table>
</div>
<script language=JavaScript><!--
ini = new Date().getTime();
var pc = 0;
load();
function load() {
pc += 2;
lpc.style.width = pc + "%";
time = setTimeout("load()",25);
if (pc > 100) { clearTimeout(time); loaded() }
}
function loaded() {
fim = new Date().getTime();
dif = fim - ini;
ld.style.display = 'none';
adslxp.style.display = '';
}
function Show() {
if (txt.style.display == "none") { txt.style.display = "" }
else { txt.style.display = "none" }
}
//--></script>
<!========================载入进度条========================>
</body>
</html>
<html>
<form name=loading>
<p align=center>
<font color="#0066ff" size="2" face="Arial">loading... </font>
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:white; padding:0px; border-style:none;">
<br>
<input type=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">
<script>
var bar=0
var line="||"
var amount="||"
count()
function count(){
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar <99)
{setTimeout("count()",50);}
}
</script>
</p>
</form>
</html>
4款Javascript进度条
试一试这个也很好的：
<html>
<head>
<title>进度条</title>
<style type="text/css">
.bgBar{
background: #FFFFFF;
font-family: Arial,Verdana;
border: 1px solid #000000;
font-size: 17;
font-weight: bold;
}
.bgBar div{
background: #DAECC8;
border: 1px solid #FFFFFF;
color: #308040;
text-align: right;
overflow: hidden;
}
</style>
<script type="text/javascript">
/****************************************************************************************/
//下面代码为进度条的封装
if (syj == null) var syj = {};
//进度条,parent进度条的父控件对象,width进度条的宽度,barClass进度条的css,display是否显示进度条
syj.ProgressBar=function(parent, width , barClass, display) {
this.parent=parent;
this.pixels = width;
this.parent.innerHTML="<div/>";
this.outerDIV = this.parent.childNodes[0];
this.outerDIV.innerHTML="<div/>";
this.fillDIV = this.outerDIV.childNodes[0];
this.fillDIV.innerHTML = "0";
this.fillDIV.style.width = "0px";
this.outerDIV.className = barClass;
this.outerDIV.style.width = (width + 2) + "px";
this.parent.style.display = display==false?'none':'';
}
//更新进度条进度 pct的值要介于0和1之间
syj.ProgressBar.prototype.setPercent = function(pct) {
var fillPixels;
if (pct < 1.0){
fillPixels = Math.round(this.pixels * pct);
}else {
pct = 1.0;
fillPixels = this.pixels;
}
this.fillDIV.innerHTML = Math.round(100 * pct) + "%";
this.fillDIV.style.width = fillPixels + "px";
}
//控制进度条的 显示/隐藏
syj.ProgressBar.prototype.display= function(v){
this.parent.style.display = v==true?'':'none';
}
//初始化进度条
function init(){
window.jtProBar = new syj.ProgressBar(document.getElementById("progressBar"), 450 , "bgBar");
}
/****************************************************************************************/
//下面代码为演示程序
//开始演示
function startAutoDemo(){
if(window.thread==null)
window.thread=window.setInterval("updatePercent()",60);
}
//停止演示
function stopAutoDemo(){
window.clearInterval(window.thread);
window.thread=null;
}
//演示程序
function updatePercent(){
if(window.count==null)window.count=0;
window.count=count%100
jtProBar.setPercent(window.count/100);
window.count++;
}
/****************************************************************************************/
</script>
</head>
<body onload="init()">
<input type="button" value="100%效果" onclick="window.stop=false;jtProBar.setPercent(1);"/>
<input type="button" value="开始自动演示" onclick="startAutoDemo()"/>
<input type="button" value="停止自动演示" onclick="stopAutoDemo()"/>
<input type="button" value="显示" onclick="jtProBar.display(true)"/>
<input type="button" value="隐藏" onclick="jtProBar.display(false)"/>
<!-- 进度条的父控件 -->
<div id="progressBar"></div>
</body>
</html>
这里有一个很简单的，你可以看看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 进度条 </title>
<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>
<style type="text/css">
#loading{ height: 20px; margin: 0 auto; border: 1px solid #d4d4d4;}
</style>
<div id="loading"></div>
<script type="text/javascript">
function Load(id,width){
this.ele = document.getElementById(id);
this.indicator = document.createElement('div');
this.width = (width > 0 && width) || 300;
this.init();
}
Load.prototype = {
constructor:Load,
init:function(){
this.ele.style.width = this.width + 'px';
this.ele.appendChild(this.indicator);
var iStyle = this.indicator.style;
iStyle.width = 0;
iStyle.height = '100%';
iStyle.background = '#ff5500';
},
start:function(){
//this.init();
this.loading();
},
loading:function(){
this.timer = setTimeout(function(obj){
var t = obj.indicator.data || 0;
if(t < obj.width){
obj.indicator.style.width = t + 1 +'px';
obj.indicator.data = t + 1;
obj.loading();
}else{
clearInterval(obj.timer);
}
},10,this);
},
stop:function(){
clearTimeout(this.timer);
}
}
var load_1 = new Load('loading',300);
load_1.start();
function run()
{
var target = document.getElementById("loading");
target.removeChild(target.childNodes[0]);
var load_1 = new Load('loading',300);
load_1.start();
}
</script>
<p><input type="button" value=" 演示 " onclick="run()" /></p>
我一个项目中用到的按百分比显示的进度条
<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
var i;
function go()
{
bar_width = document.getElementById("bg").clientWidth;
i = bar_width;
setTimeout('start();',300);
}
function start()
{
if(i–>0)
{
ps.style.width = i;
bn.innerHTML = Math.floor((bar_width-i)/bar_width*100)+"%";
setTimeout('start();',20);
}
}
</script>
<style type="text/css">
#bg {
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr=#FFFF00, EndColorStr=#FF0000);
width:300px;
height:20px;
border:1px solid black;
z-index:0;
position:absolute;
}
#ps {
float:right;
background-color:#FFFF00;
width:100%;
}
#bn {
position:absolute;
text-align:center;
width:100%;
height:100%;
cursor:default;
}
</style>
</head>
<body onload="go();">
<div id="bg"><div id="ps"></div><span id="bn">0%</span></div>
</body>
</html>
<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
var _Hex = Array("00","01","02","03","04","05","06","07","08","09",
"0A","0B","0C","0D","0E","0F","10","11","12","13","14","15","16","17","18","19",
"1A","1B","1C","1D","1E","1F","20","21","22","23","24","25","26","27","28","29",
"2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39",
"3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49",
"4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59",
"5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69",
"6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79",
"7A","7B","7C","7D","7E","7F","80","81","82","83","84","85","86","87","88","89",
"8A","8B","8C","8D","8E","8F","90","91","92","93","94","95","96","97","98","99",
"9A","9B","9C","9D","9E","9F","A0","A1","A2","A3","A4","A5","A6","A7","A8","A9",
"AA","AB","AC","AD","AE","AF","B0","B1","B2","B3","B4","B5","B6","B7","B8","B9",
"BA","BB","BC","BD","BE","BF","C0","C1","C2","C3","C4","C5","C6","C7","C8","C9",
"CA","CB","CC","CD","CE","CF","D0","D1","D2","D3","D4","D5","D6","D7","D8","D9",
"DA","DB","DC","DD","DE","DF","E0","E1","E2","E3","E4","E5","E6","E7","E8","E9",
"EA","EB","EC","ED","EE","EF","F0","F1","F2","F3","F4","F5","F6","F7","F8","F9",
"FA","FB","FC","FD","FE","FF");
function go()
{
setTimeout('start();',100);
}
var i=0;
function start()
{
if(i++<256)
{
ps.innerHTML += "<span style='width:1px;background-color:#FF"+_Hex[256-i]+"00;'>";
bn.innerHTML = Math.floor(i/2.56)+"%";
setTimeout('start();',10);
}
}
</script>
<style type="text/css">
#ps {
background-color:#FFFF00;
width:256px;
margin: 1px;
float:left;
}
#bn {
width:39px;
margin: 1px;
float:right;
text-align:center;
color:#FFFFFF;
font-family:Arial;
font-size:13px;
}
</style>
</head>
<body onload="go();">
<div style="background-color:black;width:300px;height:20px;"><div id="ps"></div><div id="bn"></div></div>
</body>
</html>
我也加一个JavaScript模拟的上传进度条
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>JavaScript上传进度条</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.spa{
font-size:12px;
color:#0066ff;
}
.put{
font-size:12px;
font-family:Arial;
color:#0066ff;
background-color:#fef4d9;
padding:0px;
border-style:none;
}
.put2{
font-size:12px;
color:#0066ff;
text-align:center;
border-width:medium;
border-style:none;
}
</style>
</HEAD>
<BODY>
<div id="up">
<span class="spa">载入中,请稍等...</span>
<input id="chart" type="text" size="54" class="put" readOnly />
<input id="percent" type="text" size="20" class="put2" readOnly />
</div>
<div id="ff">
<form name="upload" method="post" action="">
<input type="file" id="f" size="30" />
<input type="button" id="b" value="上传" onclick="count()"/>
</form>
</div>
<script language="javascript">
var bar=0;
var line="||";
var amount="";
document.getElementById("up").style.display="none";
function count(){
var f = document.getElementById("f");
var b = document.getElementById("b");
b.disabled = true;
f.disabled = true;
if(f.value==""){
b.disabled = false;
f.disabled = false;
alert("请添加上传文件");
return false;
}
document.getElementById("up").style.display="inline";
bar = bar+2;
amount = amount+line;
document.getElementById("chart").value=amount;
document.getElementById("percent").value=bar+"%";
if(bar<99){
setTimeout("count()",200);
}else{
b.disabled = false;
f.disabled = false;
alert("加载完毕！");
document.getElementById("up").style.display="none";
// window.location="";
}
}
</script>
</BODY>
</HTML>
下面这个是js实现进度条的，可以设置进度时间间隔！
<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=gb2312">
<title></title>
<script>
var time=400; //设定控制时间
function init(){
var tid;
var o;
if(!--time){
alert('jfdk');
document.getElementById('fuwu').innerHTML="ok!";
window.location.href='http://www.baidu.com';
}
else{
per=parseInt(((400-time)/400)*100);//可以把这段js中的所有数字缩小10倍时间就会减少10倍
o=document.getElementById("prog"+per);
o.style.backgroundColor="lightblue";
tid=setTimeout("init()",100);
}
}
</script>
</HEAD>
<BODY onload=init()>
<FORM onkeydown="if(event.keyCode==13){return false;}" action="" onSubmit="return false;">
<table>
<tr>
<td class="Class_head" colspan=100>请稍等......
</tr>
<tr>
<td style="text-ailgn:center;font-size:36pt;font-family:arial" colspan=100><div id="fuwu">Rebooting...</div>
<tr style="border:1px solid gray;background-color:#eeeeee">
<script>
for(i=0;i<100;i++)//这里将<tr>分成了100个td然后用上面的script没0.4秒点亮一个td就成了进度条效果了
document.write("<td id=prog"+i+" height=20 width=1>");
</script>
</table>
</FORM>
</BODY>
</HTML>