【构想】

　　　　　　CSS3 + JS

　　　　　　CSS3控制进度

　　　　　　　　利用CSS3中的 @keyframes

　　　　　　JS实现百分比

　　　　　　　　根据CSS来调整，时间

【页面代码】

　　

　　第一种:

　　　　　　默认直接进入就是下载　　

　　CSS代码

　　

  1. body {
  2.         background-color: #f5f7f9;
  3.         color: #6c6c6c;
  4.         font: 300 1em/1.5em;
  5.     }
  6.  
  7.     .container {
  8.         left: 50%;
  9.         position: absolute;
  10.         top: 40%;
  11.         transform: translate(-50%, -50%);
  12.         -webkit-transform: translate(-50%, -50%);
  13.     }
  14.     /* PROGRESS */
  15.  
  16.     .progress {
  17.         background-color: #e5e9eb;
  18.         height: 0.25em;
  19.         position: relative;
  20.         width: 24em;
  21.     }
  22.  
  23.     #progress-bar {
  24.         animation-duration: 3s;
  25.         animation-name: width;
  26.         background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  27.         background-image: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  28.         background-size: 24em 0.25em;
  29.         height: 100%;
  30.         position: relative;
  31.     }
  32.  
  33.     @keyframes width {
  34.         0%,
  35.         100% {
  36.             transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  37.         }
  38.         0% {
  39.             width:;
  40.         }
  41.         100% {
  42.             width: 100%;
  43.         }
  44.     }
  45.  
  46.     .container .notice {
  47.         animation: change 5s linear 0s infinite;
  48.         font-size: 15px;
  49.         margin: 10px;
  50.     }
  51.  
  52.     @keyframes change {
  53.         0% {
  54.             color: #4cd964;
  55.         }
  56.         25% {
  57.             color: #5ac8fa;
  58.         }
  59.         50% {
  60.             color: #007aff;
  61.         }
  62.         75% {
  63.             color: #5856d6;
  64.         }
  65.         100% {
  66.             color: #ff2d55;
  67.         }
  68.     }

　　HTML代码

  1. <div class="container">
  2.         <div class="notice"id="notice">
  3.             奴家,正在~客官不要急啦~(づ￣ 3￣)づ
  4.         </div>
  5.         <div class="progress">
  6.             <div id="progress-bar">
  7.             </div>
  8.         </div>
  9.   </div>

　　　JS代码

  1.   window.onload = function() {
  2.             var progressBar = {
  3.                 //初始化
  4.                 init: function() {
  5.                     var oBar = document.getElementById('progress-bar');
  6.                     var oNotice = document.getElementById('notice');
  7.                     var count = 0;
  8.                     //百分比计算,根据css的来
  9.                     var timer = setInterval(function() {
  10.                         count++;
  11.                         oBar.innerHTML = count + '%';
  12.                         if (count === 100) {
  13.                             oNotice.innerHTML = '客官,奴家好了~(✿◡‿◡)'
  14.                             clearInterval(timer);
  15.                         }
  16.                     }, 30);
  17.                 }
  18.             };
  19.             progressBar.init();
  20.         }

　　

第二种:

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

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title>进度条</title>
  7.         <style type="text/css">
  8.             #pro {
  9.                 width: 0px;
  10.                 height: 20px;
  11.                 background-color: #cea;
  12.                 text-align: center;
  13.             }
  14.         </style>
  15.     </head>
  16.  
  17.     <body>
  18.         <button onclick="down()">下载</button>
  19.         <button onclick="stop()">暂停</button>
  20.         <br />
  21.         <div id="pro"></div>
  22.     </body>
  23.     <script>
  24.         var count = 0;
  25.         var tid;
  26.  
  27.         function Progress() {
  28.             count++;
  29.             if (count == 101) {
  30.                 Fn();
  31.             } else {
  32.                 var oPro = document.getElementById("pro")
  33.                 oPro.innerText = count + "%";
  34.                 oPro.style.width = 3 * count + "px";
  35.             }
  36.         }
  37.  
  38.         function down() {
  39.             oStria = setInterval("Progress()", 100)
  40.         }
  41.         function stop(){
  42.             clearInterval(oStria)
  43.         }
  44.  
  45.         function Fn() {
  46.             clearInterval(oStria)
  47.             alert("下载完成")
  48.         }
  49.     </script>
  50.  
  51. </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（五）汇总和分组数据

    一.汇总数据 工作中经常需要汇总数据而不是将它们全部检索出来(实际数据本身:返回实际数据是对时间和处理资源的浪费),这种类型的检索有以下特点: ①确定表中的行数(或者满足某个条件或包含某个特定值的行数 ...

  2. Recurrent Neural Network[CTC]

    0. 背景 1. CTC原理 图 CTC结构图 CTC是看似和HMM有些联系,然后也采用DP来进行求解,将CTC结构图中<RNN输出,CTC层>单独拿出来,得到如下形式: 图 用前向-后向 ...

  3. java算法----排序----（6）希尔排序（最小增量排序）

    package log; public class Test4 { /** * java算法---希尔排序(最小增量排序) * * @param args */ public static void ...

  4. docker部署rabbitMQ

    获取rabbit镜像: docker pull rabbitmq:management 创建并运行容器: docker run -d --hostname my-rabbit --name rabbi ...

  5. ASP.NET Core使用TopShelf部署Windows服务

    asp.net core很大的方便了跨平台的开发者,linux的开发者可以使用apache和nginx来做反向代理,windows上可以用IIS进行反向代理. 反向代理可以提供很多特性,固然很好.但是 ...

  6. Visual Studio2013安装过程以及单元测试

    一.安装环境 操作系统版本:Windows10家庭中文版64位 CPU:i5-4200u  1.60GHz 硬盘内存:750G 二.安装版本 Visual Studio2013 三.安装过程 Visu ...

  7. opencv学习笔记（五）

    线性滤波 方框滤波--boxblur函数 均值滤波(邻域平均滤波)--blur函数 高斯滤波--GaussianBlur函数 中值滤波--medianBlur函数 双边滤波--bilateralFil ...

  8. PAT 甲级 1045 Favorite Color Stripe

    https://pintia.cn/problem-sets/994805342720868352/problems/994805437411475456 Eva is trying to make ...

  9. MySQL的basedir

    C:\Documents and Settings\All Users\Application Data\MySQL\MySQL Server 5.7\Data

  10. jmeter 使用csv文件 注意项

    1.首先在jmeter 中导入csv文件时我们程序并不知道csv文件中有多少行 : >1.获取的时候 使用 循环控制器来获取csv文件中的所有数据 : 通过 ${__jexl3("${ ...