进度条一般在手机上用到的比较广泛，刚好最近的项目也是一直在做手机站，这个特效是手机端的一个界面，现在我把改成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. 浅谈Linux的内存管理机制

    转至:http://ixdba.blog.51cto.com/2895551/541355 一 物理内存和虚拟内存          我们知道,直接从物理内存读写数据要比从硬盘读写数据要快的多,因此, ...

  2. SIGGRAPH 2014 之行

    当地时间8月8号: 经历十个多小时的飞行,在紧急出口旁的位置上忍受发动机的轰鸣声后,顺利降落温哥华机场.回答完加拿大边检的几个诸如为何而来,打算住哪儿的问题后,比较顺利出关.三十五加元的打车费及百分十 ...

  3. Android 定时器实现的几种方式和removeCallbacks失效问题详解

    实现定时器有很多种方式,在这里我简单的介绍几种方式 (1)使用Handler + Runnable的方式 Handler handler = new Handler(); Runnable runna ...

  4. Qt 显示透明flash和编写QtWebkit插件

    Qt 有两种方法可以显示flash. 1. 通过QAxWidget 调用com形式显示flash, 需要本机安装IE flash插件 2. 直接通过qwebview显示flash, 需要下载webki ...

  5. 炼数成金hadoop视频干货01

    视频地址:http://pan.baidu.com/s/1dDEgKwD 最开始还是讲hadoop的起源,但是和其他垃圾视频不同,不是照本宣科,听了还是受益.作者给人一种感觉就是他是确实把他的经验和体 ...

  6. DNA比对

    [编程题](满分27分) 脱氧核糖核酸即常说的DNA,是一类带有遗传信息的生物大分子.它由4种主要的脱氧核苷酸(dAMP.dGMP.dCMT和dTMP)通过磷酸二酯键连接而成.这4种核苷酸可以分别记为 ...

  7. Maven 仓库

    Maven仓库分为本地仓库和远程仓库(中央仓库,私服,其他公共仓库)一张图就可以很清楚的看出结构 本地仓库:本地仓库是在我们当前电脑系统盘的user-administrator-m2-reposito ...

  8. html 动态添加TABLE的行。

    <script type="text/javascript"> var pos =4;//默认位置为4,根据自己需要,也可以通过鼠标事件获取当前行数. function ...

  9. Adobe Edge Animate --使用HTML5实现手机摇一摇功能

    Adobe Edge Animate --使用HTML5实现手机摇一摇功能 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. HTML5的发展日新月异,其功能 ...

  10. 关于Windows下如何查看端口占用和杀掉进程

    更详细博客参见: http://www.cnblogs.com/chenwenbiao/archive/2012/06/24/2559954.html 或可参考:http://www.cnblogs. ...