js动态进度条

来源:luqidong 发布时间:2014-03-29 20:45:37 点击数:
<html>
<head></head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
var Method=  function(obj,vOpts)
{
var vobj=obj;
var opts={
start:1,
finish:3,
step:1,
nowStep:0
}
opts=vOpts;
this.step1=function(){
vOpts.nowStep=vOpts.start+vOpts.step;
this.setWidth(vOpts.nowStep);
}
this.step2=function(){
vOpts.nowStep=vOpts.nowStep+vOpts.step;
this.setWidth(vOpts.nowStep);
}
this.setWidth=function(Prec)
{
startMove(vobj.children[0],{width: 600*Prec/vOpts.finish})
// vobj.children[0].style.width=100*Prec/vOpts.finish+'%';
}
}
window.onload=function(){
var pp=document.getElementById('progress');
var mm=new Method(pp,{start:0,finish:3,step:1,nowStep:0});
mm.step1();
setTimeout(function(){mm.step2();},3000);
 
 
}
 
</script>
<style type="text/css">
#progress{border: 1px solid gray; width: 600px;height: 30px;margin: 0 200;position: relative; padding: 1;}
.pbar{background-color:#ff6600; width: 20px;position: absolute;height: 30px;}
#btngo{display: inline-block; text-align:center; width: 100px; background-color:#ff6600 ;text-decoration: none; padding: 5px; margin:0 200;font-family:"微软雅黑"; color: #333}
</style>
<body>
<div id="progress">
<div class="pbar" id="pbar">
</div>
</div>
<div>
<a id="btngo" href="#">开始</a>
</div>
</body>
</html>
move里面的分装:
 
function getStyle(obj, name)//获取CSS样式兼容
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[name];
    }
    else
    {
        return getComputedStyle(obj, false)[name];
    }
}
 
 
//startMove(oDiv, {width: 400, height: 400})
 
 
function startMove(obj, json, fnEnd)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bStop=true; //假设:所有值都已经到了
 
        for(var attr in json)
        {
            var cur=0;
 
            if(attr=='opacity')
            {
                cur=Math.round(parseFloat(getStyle(obj, attr))*100);
            }
            else
            {
                cur=parseInt(getStyle(obj, attr));
            }
 
            var speed=(json[attr]-cur)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
 
            if(cur!=json[attr])
                bStop=false;
 
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                obj.style.opacity=(cur+speed)/100;
            }
            else
            {
                obj.style[attr]=cur+speed+'px';
            }
        }
 
        if(bStop)
        {
            clearInterval(obj.timer);
 
            if(fnEnd)fnEnd();
        }
    }, 30);
}
 
截图:
78OA办公系统
本文由免费oa系统78oa原创,转载请注明出处。