Js 百分比进度条
【构想】
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 百分比进度条的更多相关文章
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- HTML5圆形百分比进度条插件circleChart
在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script&g ...
- nprogress.js 头部进度条使用方法
nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...
- BitBlt()函数实现带数字百分比进度条控件、静态文本（STATIC）控件实现的位图进度条、自定义进度条控件实现七彩虹颜色带数字百分比
Windows API BitBlt()函数实现带数字百分比进度条控件. 有两个例子:一用定时器实现,二用多线程实现. 带有详细注解. 此例是本人原创,绝对是网上稀缺资源(本源码用Windows AP ...
- 使用ajax实现简单的带百分比进度条
需求:当进行文件上传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验 实现步骤 JSP页面 1.添加table标签 <table id="load" w ...
- js 实现进度条功能。
/** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...
- js控制进度条到达100%跳转界面一
进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码: <st ...
- js实现进度条
不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- C#的delegate简单练习
delegate中文的意思为委托. 在很久之前,Insus.NET有写过一篇<用一个简单的例子来演绎事件委托>http://www.cnblogs.com/insus/p/3732075. ...
- kubectl客户端工具远程连接k8s集群
一.概述 一般情况下,在k8smaster节点上集群管理工具kubectl是连接的本地http8080端口和apiserver进行通讯的,当然也可以通过https端口进行通讯前提是要生成证书.所以说k ...
- Spring Boot 进行Bean Validate和Method Validate
SpringBoot在内部通过集成hibernate-validation 已经实现了JSR-349验证规范接口,在SpringBoot项目中只要直接使用就行了. 一般用在Controller中用于验 ...
- 【强化学习】python 实现 q-learning 例一
本文作者:hhh5460 本文地址:https://www.cnblogs.com/hhh5460/p/10134018.html 问题情境 -o---T# T 就是宝藏的位置, o 是探索者的位置 ...
- spring-session-data-redis包冲突
包冲突 spring 的包很容易冲突, 因为写软件的人在兼容性上处理的不够,一般不检测重复加载. spring-session-data-redis 引用后, 一定要把 spring-session ...
- Bash笔记
expect写法 /usr/bin/expect <<-EOF set timeout 3000 spawn ssh root@${server_ip} expect { "pa ...
- rsync同步时，删除目标目录比源目录多余文件的方法（--delete）
在日常运维工作中,我们经常用到rsync这个同步神器.有时在同步两个目录时,会要求删除目标目录中比源目录多出的文件,这种情况下,就可用到rsync的--delete参数来实现这个需求了. 实例说明:在 ...
- B. Forgery
链接 [http://codeforces.com/contest/1059/problem/B] 题意 要伪造医生签名,先给你医生的签名nm的网格'.'表示空白',#'表示墨水,你的笔可以这么画以一 ...
- Linux内核分析——程序破解
1. 掌握NOP.JNE.JE.JMP.CMP汇编指令的机器码 NOP:NOP指令即“空指令”.执行到NOP指令时,CPU什么也不做,仅仅当做一个指令执行过去并继续执行NOP后面的一条指令.(机器码: ...
- hbase 1.2.1 分布式安装
1.机器信息 五台centos 64位机器 2.集群规划 Server Name Hadoop Cluster Zookeeper Ensemble HBase Cluster Ip Hado ...