`
zhengshuangxi1226
  • 浏览: 50219 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js进度条效果

阅读更多
javascript 前端进度条效果<title>网页loading</title>
<script language="javascript">
  function setSB(v, el) {
    var ie5 = (document.all  &&  document.getElementsByTagName);
    if (ie5 || document.readyState == "complete")     {
      filterEl = el.children[0];
      valueEl = el.children[1];
      filterEl.style.width = v + "%";
      valueEl.innerText = v + "%";
    }
  }
  function fakeProgress(v, el) {
    if (v > 100)
      location.href = "/";
    else     {
      setSB(v, el);
      window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 20);
    }
  }
</script>
</head> 

<body onload="fakeProgress(0, sb)" topmargin=180 bgcolor=#CCCCCC>
<center>
<p align=center style="font-szie:9pt; line-height: 100%">正在加载请稍侯……</p>
<span id=sb style="width: 500px">
<div style="filter: Alpha(Opacity=0, FinishOpacity=60, style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); width: 0%; height: 12px; position: absolute; background: #9999ff"></div>
<div style="font-size: 12px; width: 100%; color: #ff3333; font-family: arial; text-align: center"></DIV>
</span>
</center>
</body>
</html>














<html xmlns="http://schemas.microsoft.com/intellisense/html-401">
<head>
    <title>一个JS做的相当漂亮的进度条</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://www.qpsh.com";

}
loading();

</script>
</html>

分享到:
评论

相关推荐

    javascript 实现的进度条效果

    javascript 实现的进度条效果 javascript 实现的进度条效果

    javascript 椭圆进度条效果代码

    在JavaScript编程中,椭圆进度条效果是一种常见的用户界面元素,用于展示任务或过程的进度。这个效果可以增强用户体验,因为它以图形化的方式提供实时反馈。在这个“javascript 椭圆进度条效果代码”中,我们可以...

    原生js实现可拖拽进度条效果

    在JavaScript(JS)中,创建一个可拖拽的进度条效果涉及到多个核心概念和技术,包括事件监听、DOM操作以及CSS样式调整。以下是对这个主题的详细讲解: 首先,我们需要理解HTML结构,通常一个进度条会包含一个容器...

    JS进度条,实现同步增长效果

    通过进一步的优化和定制,你可以创建出各种各样的进度条效果,满足不同应用场景的需求。在实际项目中,你还可以考虑使用现有的库,如NPM上的`@nivo/progress`或`progressbar.js`,它们提供了丰富的预设样式和功能,...

    原生js百分比进度条效果

    在网页开发中,原生JavaScript实现的百分比进度条效果是一种常见的动态展示数据或加载状态的元素。...这个例子中的"简单好用的原生js百分比进度条效果"文件可能包含了上述代码示例,供开发者参考和使用。

    js完美进度条,做效果的不二选择

    本文将深入探讨如何利用JavaScript实现一个完美的进度条效果,并分享相关知识点。 首先,我们需要理解进度条的基本构成。一个基本的进度条通常包括一个容器(如HTML div元素)和一个填充部分(代表进度)。容器宽度...

    13种CSS3网页加载进度条效果

    【标题】:“13种CSS3网页加载进度条效果” 在网页设计中,加载进度条是一种常见的用户体验元素,它能够向用户展示数据加载的进度,缓解用户等待时的焦虑感。CSS3作为现代Web设计的强大工具,提供了丰富的样式和...

    纯js+css3渐变进度条动画特效

    脚本简介:纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效,动态加载效果,背景色动态渐变,纯css+js实现,对于简单页面实现进度条效果可以简单利用此方法。 脚本简介:纯js+css3渐变...

    js进度条大全,总有一款适合您

    开发者可以通过打开这些文件,在浏览器中预览和测试不同的进度条效果。 3. `CProgress.js`:这可能是一个JavaScript库,专门用于创建进度条。它可能包含了一系列的函数和方法,用于初始化、更新、控制进度条的显示...

    JS 进度条效果实现代码整理

    在JavaScript中,进度条效果是一种常见的用户界面元素,用于指示某个任务或操作的完成程度。在给定的文件中,提供了两种实现进度条效果的方法,分别通过`Loading.js`和一个名为`progress.js`的类文件。下面我们将...

    基于JQuery的动态进度条,酷!

    在网页开发中,动态进度条是一...在实际应用中,可能还需要考虑进度条的动画效果、自定义样式以及与后端数据的交互等方面。通过JQuery的灵活性和强大的功能,我们可以轻松实现各种复杂的前端效果,提升用户的交互体验。

    jQuery/CSS3动感实用的进度条插件 10种漂亮外观

    最近这两天一直在为大家分享一些HTML5、CSS和SVG的炫酷动画,...这次我们来介绍一款实用的jQuery进度条插件,这款jQuery进度条插件的外观利用了CSS3的特性,让进度条外观显得非常时尚漂亮,一共有10种样式,非常实用。

    利用Ajax+Jquery实现异步进度条效果

    "利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开,它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先,C#是一种面向对象的编程语言,广泛应用于...

    通过js实现百分比进度条

    本篇文章将深入探讨如何使用JavaScript(JS)、HTML和CSS来实现一个动态的百分比进度条。首先,我们需要理解这三种技术在构建进度条中的角色。 **HTML**:HTML(超文本标记语言)用于构建页面的基本结构。在这里,...

    css+js动态进度条的实现

    本文将详细介绍如何使用CSS和JavaScript来实现这种动态效果,并通过示例页面进行演示。 一、CSS基础 首先,我们需要创建一个进度条的基本结构,通常是一个包含两个子元素的HTML结构:一个是进度条容器,另一个是...

    web开发不错的进度条效果

    在Web开发中,进度条效果是一种常见的用户界面元素,它能够直观地展示任务或数据加载的进度,增强用户体验。在给定的标题“web开发不错的进度条效果”中,我们可以推测这是一个关于创建美观且实用的进度条效果的技术...

    canvas 圆形进度条效果.zip

    "其它代码"可能意味着这是一段自定义的、非标准库的 JavaScript 实现,专为特定的圆形进度条效果而编写。 【压缩包子文件的文件名称列表】:1592 虽然没有提供具体的文件内容,但根据名称我们可以推测这个压缩包内...

    环形饼状图进度条效果

    在本案例中,“环形饼状图进度条效果”指的是一个动态的、可以展示进度的环形饼状图。这种图表通常用在监控任务进度、软件加载状态或资源分配等场景,因为它们直观且吸引用户的注意力。 动态进度条是此环形饼状图的...

Global site tag (gtag.js) - Google Analytics