JS打造完美进度条

 

问题提出:

今天在CSDN上一个网友问了一个小问题, 是关于网页进度条的, 下面就简单讨论下.我们知道在Delphi编程里可以利用自带控件轻松实现加载进度条(报表/批次…), 那么在网页编程里如何实现呢?

 

分析问题:

在网页编程里, 进度条可以用flash制作, 然后放在进度页上, 当加载时候播放, 播放后跳转到制定的URL, 然而由于不用大小的页面下载所需的时间长短是不同的, 有的长, 有的甚至眨眼即下载好了, 我们总不能跳转到www.baidu.com去也要等个2~3妙吧, 这里我们除了要考虑跳转时间的准确----下载完立即跳转, 还要考虑界面的美观----最好用立体图片, 早上在网上搜索了相关资料, 找到了两种比较好的方法:

方法一是用JS写的一段程序, 它应用了layer技术, 它是在页面信息下载后的立即跳转, 时间把握较好, 然而进度条是通过循环给色块增加宽度来实现的, 美观不理想.

 

方法二亦是JS写的, 利用网页的定时跳转----setTimeout, 在定时里利用两张图片的层叠移动实现滚动效果, 界面非常清爽漂亮. 不足的是何时跳转要依据定的时间----程序里写死的.

 

那我想为什么不把这两种方法结合起来呢, 修改方法一的代码, 将进度条宽度递增的代码修改程方法二的图片效果, 好, 就这么做.

 

解决问题:

       修改JS代码很简单, 没有什么好说的拉, 把代码附上供参考吧(J我改的地方都加了注释了):

       用到的两张图片:

 

//20080305 MODI BY CHENGJIE 若在本地测试请看第98行
AddProcessbar(); 
var bwidth=0; 
var swidth = document.all.waiting.clientWidth; 
 
function CheckIsProcessBar(obj) 
{ 
if (obj.IsShowProcessBar=="True")  
{ 
return false; 
}  
else 
{ 
return true; 
} 
} 
 
function CheckClick(e) 
{ 
if (e == 1) 
{ 
if (bwidth<swidth*0.98){ 
bwidth += (swidth - bwidth) * 0.025; 
if (document.all)document.sbar.width = bwidth; 
else document.rating.clip.width = bwidth; 
setTimeout('CheckClick(1);',150); 
} 
} 
else 
{ 
if(document.all) 
{ 
if(document.all.waiting.style.visibility == 'visible') 
{document.all.waiting.style.visibility = 'hidden'; 
bwidth = 1;} 
whichIt = event.srcElement; 
 
while (CheckIsProcessBar(whichIt)) 
{ 
whichIt = whichIt.parentElement; 
if (whichIt == null)return true; 
} 
document.all.waiting.style.pixelTop = (document.body.offsetHeight - document.all.waiting.clientHeight) / 2 + document.body.scrollTop; 
document.all.waiting.style.pixelLeft = (document.body.offsetWidth - document.all.waiting.clientWidth) / 2 + document.body.scrollLeft; 
document.all.waiting.style.visibility = 'visible'; 
if(!bwidth)CheckClick(1); 
bwidth = 1; 
} 
else 
{ 
if(document.waiting.visibility == 'show') 
{document.waiting.visibility = 'hide'; 
document.rating.visibility = 'hide'; 
bwidth = 1;} 
if(e.target.href.toString() != '') 
{ 
document.waiting.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset; 
document.waiting.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset; 
document.waiting.visibility = 'show'; 
document.rating.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset+document.waiting.clip.height-10; 
document.rating.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset; 
document.rating.visibility = 'show'; 
if(!bwidth)CheckClick(1); 
bwidth = 1; 
} 
} 
return true; 
} 
} 

//////////////////////////////////////////////////////////
//20080305 ADD =====================================START
//////////////////////////////////////////////////////////
function DoubleAnimation(target,targetProperty,from,to,Duration)
{
    this.Begin=function anonymous()
    {
        target[targetProperty]=from;
        var starttime=new Date();
        setTimeout(StoryBoard(),1);
        function StoryBoard()
        {
            return function()
            {                 
                var now=new Date();
                var d=now.getTime()-starttime.getTime();
                target[targetProperty]=Math.round(from+(to-from)*d/Duration);
                if(d<Duration)setTimeout(StoryBoard(),10);
            }
        }
    }
    this.setTo=function(val){to=val;}
    this.setFrom=function(val){from=val;}
} 

function ProgressBar(ID)
{
    //20080305 MODI 修改图片地址"http://www.qpsh.com/icon/iconfullpb.jpg\"为"2.jpg\", "http://www.qpsh.com/icon/emptypb.jpg\"为"1.jpg\" , 注意, 这里//用到的两个图片需要拷贝至本地,路径可自行修改
    document.write( "<div id=\""+ID+"\" style=\"position:absolute;top:10%;width:100; left: 0px;\">");
    document.write( "    <image src=\"2.jpg\" style=\"position: absolute;left: -180%; top: 0px;\" />");
    document.write( "    <div id=\""+ID+"pb\" style=\"position: absolute; left: -180%; top: 0px;z-index:5;overflow:hidden;width:130;\" >");
    document.write( "        <img src=\"1.jpg\"/>");
    document.write( "        <div id=\""+ID+"highlight\" style=\"background:#ffffff;left: -500px; position: absolute; top: -1px;width:100;height:20;filter:Alpha(Opacity=75,FinishOpacity=0,Style=2)\">");
    document.write( "        </div>");                        
    document.write( "    </div>");    

    document.write( "    <div style=\"position:absolute;top:-50px;width:180px; left: -100px;\">");
    document.write( "        系統正在處理中");
    document.write( "    </div>");
    document.write( "</div>");

    var story=new DoubleAnimation(document.getElementById(ID+"highlight").style,"left",-100,324,2000)
    var stophandle=setInterval(story.Begin,2000);
    this.set=function(percentage)
    {
        document.getElementById(ID+"pb").style.width=Math.round(percentage*329/100);
    }
}
//////////////////////////////////////////////////////////
//20080305 ADD =====================================END
//////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////
//20080305 MARK ====================================START
//////////////////////////////////////////////////////////
/**//*
function AddProcessbar() 
{ 
var Str="" 
Str+= "<div id=waiting style=position:absolute;top:50px;left:100px;z-index:1;visibility:hidden >"; 
Str+= "<layer name=waiting visibility=visible zIndex=2 >" 
Str+= "<table border=2 cellspacing=1 cellpadding=0 bordercolorlight=#FFFFFF bordercolordark=#C0C0C0 bgcolor=#E0E0E0>" 
Str+= " <tr>" 
Str+= " <td bgcolor=#E0E0E0 height=30px width=300px align=center>" 
Str+= " <font color=black>系統正在處理中</font>" 
Str+= " </td>" 
Str+= " </tr>" 
Str+= " <tr>" 
Str+= " <td bgcolor=#E0E0E0>" 
Str+= " <img width=1 height=10 name=sbar style=background-color:#6699cc>" 
Str+= " </td>" 
Str+= " </tr>" 
Str+= "</table> " 
Str+= "</layer>" 
Str+= "</div>" 
document.write(Str) 
 
if(document.all)document.onclick = CheckClick; 
}
*/
//////////////////////////////////////////////////////////
//20080305 MARK ====================================END
//////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////
//20080305 MODI ====================================START
//////////////////////////////////////////////////////////
function AddProcessbar() 
{ 
var Str="" 
document.write("<div id=waiting style=position:absolute;top:50px;left:100px;z-index:1;visibility:hidden >"); 
document.write("<layer name=waiting visibility=visible zIndex=2 >"); 
var pb1=new ProgressBar("ok");
var p=0;
function loading()
{
pb1.set(p+=0.3);
if(p<100)
    setTimeout(loading,3);
    
}
loading();
Str+= "</layer>" 
Str+= "</div>" 
document.write(Str) 

if(document.all)document.onclick = CheckClick;
} 
//////////////////////////////////////////////////////////
//20080305 MODI ====================================END
//////////////////////////////////////////////////////////