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=" ...
随机推荐
- Windows 系统安装Docker Compose 步骤
参考 Docker Compose official 官方安装指南: https://docs.docker.com/compose/install/ 实际上到目前为止还不能直接在Windows上安装 ...
- SerialPort.h SerialPort.cpp
SerialPort.h 1 #ifndef __SERIALPORT_H__ 2 #define __SERIALPORT_H__ 3 4 #define WM_COMM_BREAK_DETECTE ...
- Windows下jupyter notebook 修改打开的浏览器
1. 打开cmd,输入jupyter notebook --generate-config 2. 根据返回的路径打开 C:\Users\Administrator\.jupyter\jupyter_n ...
- 在WPF中使用Caliburn.Micro搭建MEF插件化开发框架
原文:在WPF中使用Caliburn.Micro搭建MEF插件化开发框架 版权声明:原创内容转载必须注明出处,否则追究相关责任. https://blog.csdn.net/qq_36663276/a ...
- Vue 开发环境搭建 (Mac)
一.初识 由于个人工作原因以及技术需要一个提升,略晚的开始初探Vue ~.~ 二.那么Vue是什么呢? 他就是一个前端的框架,特点是数据双向绑定.组件化. 三.推荐开发环境 四.环境安装 打开终端运行 ...
- [Spark][Python]对HDFS 上的文件,采用绝对路径,来读取获得 RDD
对HDFS 上的文件,采用绝对路径,来读取获得 RDD: In [102]: mydata=sc.textFile("file:/home/training/test.txt")1 ...
- 记一次yarn导致cpu飙高的异常排查经历
yarn就先不介绍了,这次排坑经历还是有收获的,从日志到堆栈信息再到源码,很有意思,下面听我说 问题描述: 集群一台NodeManager的cpu负载飙高. 进程还在但是看日志已经不再向Resourc ...
- 【JVM.3】虚拟机性能监控与故障处理工具
一.概述 经过前面两章对于虚拟机内存分配与回收技术各方面的介绍,相信读者已经建立了一套比较完整的理论基础.理论总是作为指导实践的工具,能把这些执行应用到实际工作中才是我们的最终目的.接下来我们会从实践 ...
- MVC使用Redis实现分布式锁
使用场景 在做Web项目的时候,有很多特殊的场景要使用到锁 比如说抢红包,资源分配,订单支付等场景 就拿抢红包来说,如果一个红包有5份,同时100个人抢如果没有用到锁的话 100个人同时并发都抢成功, ...
- C#_委托的使用
C#基础---委托的使用 一:什么是委托 委托是一种定义方法签名的类型当实例化委托时,您可以将其实例与任何具有兼容签名的方法相关联.您可以通过委托实例调用方法.委托是一个引用类型,所以它具 ...