进度条一般在手机上用到的比较广泛，刚好最近的项目也是一直在做手机站，这个特效是手机端的一个界面，现在我把改成pc端了，进度条的快慢速度和样式可自行调节，改动也是很方便的，不多说，看代码：


 <style>

     * {

         margin:;

         padding:;

     }

     html, body {

         font-family: arial, "microsoft yahei";

         font-size: 14px;

         background: #c2d7ac;

     }

     .progress {

         width: 300px;

         height: 30px;

         margin: auto;;

         background: #70b4e5;

         border-radius: 5px;

         -webkit-box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;

         box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;

     }

     .progress_bar {

         width: 0%;

         height: 26px;

         background: url("images/bar.jpg") repeat;

         background-size: auto 100%;

         border-radius: 5px;

         position: relative;

         left: 3px;

         right: 3px;

         top: 2px;

     }

     p {

         width: 300px;

         text-align: center;

         font-size: 14px;

         color: #c20606;

         position: absolute;

         top: 98px;

     }

 </style>
<body onload="fakeProgress(0, load)">

<div style="height: 120px;"></div>

<div class="progress">

    <div id=load>

        <div class="progress_bar"></div>

        <p>0</p>

    </div>

</div>
 <script type="text/javascript">

     function setLOAD(v, el) {

         var read = (document.all && document.getElementsByTagName);

         if (read || document.readyState == "complete")

             valueEl = el.children[1];

         {

             filterEl = el.children[0];

             valueEl.innerText = v + "%";

             filterEl.style.width = v + "%";

         }

     }

     function fakeProgress(v, el) {

         if (v > 100)

             location.href = "begin.html";

         else {

             setLOAD(v, el);

             window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 2000);

         }

     }

 </script>
效果图：

js控制进度条到达100%跳转界面一的更多相关文章

  1. js控制进度条数据

    <style><!-- #time{ width:500px; height: 20px; background: red; border-radius: 10px; } --> ...

  2. nprogress.js 头部进度条使用方法

    nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...

  3. Js 百分比进度条

    [构想] CSS3 + JS CSS3控制进度 利用CSS3中的 @keyframes JS实现百分比 根据CSS来调整,时间 [页面代码] 第一种: 默认直接进入就是下载 CSS代码 body { ...

  4. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

  5. C# 通过委托控制进度条以及多线程更新控件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. js实现进度条

    不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. JS实现 进度条 不用控件

    demo1 <html> <head> <title>进度条</title> <style type="text/css"&g ...

  8. js实现进度条效果

    需求分析: 最近学习javascript客户端脚本语言,学到了两个定时器函数setInterval()和setTimeout(),回想起以前在网页上看到的进度条效果可以使用定时器来实现,所以完成了进度 ...

  9. 【Winform】使用BackgroundWorker控制进度条显示进度

    许多开发者看见一些软件有进度条显示进度,自己想弄,项目建好后发现并没有自己想象中的那么简单...看了网上很多教程后,写了一个小Demo供网友们参考~~,Demo的网址:http://pan.baidu ...

随机推荐

  1. php执行效率相关的语句

    一:字符替换: strtr > str_replace > preg_replace 注意: 1:一般用strtr函数的这种形式:string strtr ( string $str , ...

  2. Linux shell 脚本攻略之批量重命名

    摘自:<Linux shell 脚本攻略>

  3. 关于“学习Linux用什么系统”的解答

    首先,阐述一下,我个人的观点——这个问题我曾经也想了很久了,这绝不是长篇大论后就是简单一句,适合你的就是最好的.其实,很多人看到这一句,心里已经有成千上万个奔腾了(至少我当时是这样的),为什么?因为我 ...

  4. shell判断一个变量是否为空

    判断一个变量是否为空 . 1. 变量通过" "引号引起来 如下所示:,可以得到结果为 IS NULL. #!/bin/sh para1= if [ ! -n "$para ...

  5. IJKMediaFramework第三方库的使用

    大多数做直播的时候使用 FFMpeg.  IJKMediaFramework也是基于FFMpeg封装 使用起来比较简单,个人觉得如果有能力可以使用 FFMpeg , 使用 FFMpeg对 内存的占用比 ...

  6. Laravel Eloquent 的条件不等于

    方法一: 使用Eloquent的where where('id', '!=' , 2) 方法二: 使用Eloquent的whereNotIn ->whereNotIn( 'id', [2]) 参 ...

  7. javascript深入理解闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  8. Maven搭建SpringMVC+Hibernate项目详解

    前言 今天复习一下SpringMVC+Hibernate的搭建,本来想着将Spring-Security权限控制框架也映入其中的,但是发现内容太多了,Spring-Security的就留在下一篇吧,这 ...

  9. SSRS:之为用户“NT AUTHORITY\NETWORK SERVICE”授予的权限不足，无法执行此操作。 (rsAccessDenied)

    错误信息: 为用户"NT AUTHORITY\NETWORK SERVICE"授予的权限不足,无法执行此操作. (rsAccessDenied) 如图: 解决方案之检查顺序: 1. ...

  10. python学习day1--python基础

    Python的优缺点 先看优点 Python的定位是“优雅”.“明确”.“简单”,所以Python程序看上去总是简单易懂,初学者学Python,不但入门容易,而且将来深入下去,可以编写那些非常非常复杂 ...