很漂亮的进度条

最新推荐文章于 2021-06-03 06:46:01 发布

转载最新推荐文章于 2021-06-03 06:46:01 发布 · 720 阅读

JavaScript 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的动态进度条效果。通过自定义的DoubleAnimation函数控制进度条的平滑过渡，并利用ProgressBar函数动态调整进度百分比。该进度条包含高亮动画效果，适用于网页加载或其他需要显示进度的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://schemas.microsoft.com/intellisense/html-401">

<head>

    <title>一个JS做的相当漂亮的进度条 www.qpsh.com</title>

</head>

<body>   

</body>

<script type="text/jscript">

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)

{

    document.write( "<div id=\""+ID+"\" style=\"position:absolute;top:10%;width:100; left: 108px;\">        <image src=\"http://www.qpsh.com/icon/emptypb.jpg\" style=\"position: absolute;left: 84px; top: 137px;\" />        <div id=\""+ID+"pb\" style=\"position: absolute; left: 86px; top: 137px;z-index:5;overflow:hidden;width:130;\" >            <img src=\"http://www.qpsh.com/icon/iconfullpb.jpg\"/>           <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)\"></div>        </div>        <div style=\"position:absolute;top:83px;width:180px; left: 148px;\">        加载中请稍候......        </div>   </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);

    }

}

var pb1=new ProgressBar("ok");

var p=0;

function loading()

{

pb1.set(p+=0.3);

if(p<100)

    setTimeout(loading,2);

else

    window.location.href="http://news.qq.com";

}

loading();

</script>

</html>