【构想】

　　　　　　CSS3 + JS

　　　　　　CSS3控制进度

　　　　　　　　利用CSS3中的 @keyframes

　　　　　　JS实现百分比

　　　　　　　　根据CSS来调整，时间

【页面代码】

　　

　　第一种:

　　　　　　默认直接进入就是下载　　

　　CSS代码

　　

body {

        background-color: #f5f7f9;

        color: #6c6c6c;

        font: 300 1em/1.5em;

    }

    .container {

        left: 50%;

        position: absolute;

        top: 40%;

        transform: translate(-50%, -50%);

        -webkit-transform: translate(-50%, -50%);

    }

    /* PROGRESS */

    .progress {

        background-color: #e5e9eb;

        height: 0.25em;

        position: relative;

        width: 24em;

    }

    #progress-bar {

        animation-duration: 3s;

        animation-name: width;

        background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);

        background-image: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);

        background-size: 24em 0.25em;

        height: 100%;

        position: relative;

    }

    @keyframes width {

        0%,

        100% {

            transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);

        }

        0% {

            width:;

        }

        100% {

            width: 100%;

        }

    }

    .container .notice {

        animation: change 5s linear 0s infinite;

        font-size: 15px;

        margin: 10px;

    }

    @keyframes change {

        0% {

            color: #4cd964;

        }

        25% {

            color: #5ac8fa;

        }

        50% {

            color: #007aff;

        }

        75% {

            color: #5856d6;

        }

        100% {

            color: #ff2d55;

        }

    }

　　HTML代码

<div class="container">

        <div class="notice"id="notice">

            奴家,正在~客官不要急啦~(づ￣ 3￣)づ

        </div>

        <div class="progress">

            <div id="progress-bar">

            </div>

        </div>

  </div>

　　　JS代码

  window.onload = function() {

            var progressBar = {

                //初始化

                init: function() {

                    var oBar = document.getElementById('progress-bar');

                    var oNotice = document.getElementById('notice');

                    var count = 0;

                    //百分比计算,根据css的来

                    var timer = setInterval(function() {

                        count++;

                        oBar.innerHTML = count + '%';

                        if (count === 100) {

                            oNotice.innerHTML = '客官,奴家好了~(✿◡‿◡)'

                            clearInterval(timer);

                        }

                    }, 30);

                }

            };

            progressBar.init();

        }

　　

第二种:

　　　　　　进入不下载,点击下载开始下载,暂停则暂停,原理控制setInterval和cleanInterval

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>进度条</title>

        <style type="text/css">

            #pro {

                width: 0px;

                height: 20px;

                background-color: #cea;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <button onclick="down()">下载</button>

        <button onclick="stop()">暂停</button>

        <br />

        <div id="pro"></div>

    </body>

    <script>

        var count = 0;

        var tid;

        function Progress() {

            count++;

            if (count == 101) {

                Fn();

            } else {

                var oPro = document.getElementById("pro")

                oPro.innerText = count + "%";

                oPro.style.width = 3 * count + "px";

            }

        }

        function down() {

            oStria = setInterval("Progress()", 100)

        }

        function stop(){

            clearInterval(oStria)

        }

        function Fn() {

            clearInterval(oStria)

            alert("下载完成")

        }

    </script>

</html>

Js 百分比进度条的更多相关文章

  1. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

  2. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  3. HTML5圆形百分比进度条插件circleChart

    在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script&g ...

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

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

  5. BitBlt()函数实现带数字百分比进度条控件、静态文本（STATIC）控件实现的位图进度条、自定义进度条控件实现七彩虹颜色带数字百分比

    Windows API BitBlt()函数实现带数字百分比进度条控件. 有两个例子:一用定时器实现,二用多线程实现. 带有详细注解. 此例是本人原创,绝对是网上稀缺资源(本源码用Windows AP ...

  6. 使用ajax实现简单的带百分比进度条

    需求:当进行文件上传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验 实现步骤 JSP页面 1.添加table标签 <table id="load" w ...

  7. js 实现进度条功能。

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

  8. js控制进度条到达100%跳转界面一

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

  9. js实现进度条

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

随机推荐

  1. Mysql windows版本的安装

    一.mysql官网下载 下载安装包 MySQL Community Server (GPL)--> 选用zip版本的 二.安装 解压mysql的安装包. 将bin目录配置到环境变量中.(即环境变 ...

  2. Java实现几种常见排序方法

    日常操作中常见的排序方法有:冒泡排序.快速排序.选择排序.插入排序.希尔排序,甚至还有基数排序.鸡尾酒排序.桶排序.鸽巢排序.归并排序等. 以下常见算法的定义 1. 插入排序:插入排序基本操作就是将一 ...

  3. VS2015编写的MFC上位机，波特率可调，可动态显示曲线，可显示三维

    VS2015编写的MFC上位机,波特率可调,可动态显示曲线,可显示三维 2016年01月14日 11:40:28 博博有个大大大的Dream 阅读数:9375   版权声明:本文为博主原创文章,未经博 ...

  4. 移动电力猫HG260GT pon实现路由拨号

    帐号CMCCAdmin密码aDm8H%MdA 需要将原来上网的路由模式改成如下图中的桥接模式 实际应该就是将上网vlan连接到了1号口,这样路由就可以通过一号口接入拨号了 修改后再通过无线接入路由就不 ...

  5. github打开慢，甚至打不开

    有人使用github后,在某些网络下发现打开慢,甚至打不开,这都是因为他是国外站:目前互联网的连接机制导致超过一定的路由节点的连接就会出现这个问题,解决办法就是直接告诉本机ip.不要先层层询问域名转i ...

  6. fastjson tojson部分规则

    fastjson 作为java 目前最快速,最轻便  json对象,与json 字符串转换 第三方包,阿里巴巴提供. 对象转json规则 转json字符串 列 JSONObject.toJSON(ne ...

  7. [Oracle]Master表字段扩张时的对应方法

    Master表字段扩张时的对应方法 如果Master表的数据量很大,Master表中的列,宽度扩张了,MVIEW表如何对应处理? 此时,重建MVIEW可能会耗费很长的时间. 可以采用 alter ma ...

  8. loj6062 pair

    直接套用霍尔定理. 由于A有多个选择,考虑维护B是否合法. 首先B数组的顺序显然是没有用的,可以直接排序. 然后每个A就都变成了向一个后缀连边. 对于B,原本需要check每一个集合是否满足|u|&l ...

  9. python语言程序设计5

    1, 评估函数eval() 去掉参数最外侧引号并执行余下语句的函数. 比如eval("1"),经过运行可以得到数字 1 去得是单双引号,不是括号哦.. 广泛来说,能将任何字符串的形 ...

  10. 案例学python——案例一：抓图

    最近项目不那么紧张,有时间来研究一下Python,先前断断续续的自学了一段时间,有些浅基础.刚好在码云上看到比较适合的案例,跟着案例再往前走一波. 案例一:爬虫抓图 开发工具:PyCharm    脚 ...