用Jquery做一个进度条
用Jquery做一个进度条
本来打算写一个Jquery插件的,不过我看了看网上插件的教程,感觉都不怎么样。国外有一本书叫《jQuery Plugin Development Beginner’s Guide》,写的不错(作者之一是一位复旦毕业的华裔,所以可能语言和思维方式我们更好理解)。没有中文版。就我英语水平来估计,要看一个月……只能慢慢来了。
为什么我想自己做一个进度条,我是看了网上很多进度条的插件感觉不满意,才想自己做一个。又忍不住吐槽网上那些垃圾网站了,看十篇有八篇讲的是一样的,其中又有一半copy的不完整。而且这篇文章说到的插件官网已经不存在了,所以我并没有找到它。
于是,开始自己动手丰衣足食。
演示:https://jsfiddle.net/noiping/p4hd7n7f/
0x01 做一个简单的样式
我这个进度条很简单,不用图片也不用flash。就是使用javascript和css。
首先当然载入Jquery。我这里还用到一个插件:“圆角插件”。很简单使用,在我们需要其圆角的div上,使用corner方法即可,这里不是重点,我就不多说了。
我们的样式如下:
<html>
<head>
<title>进度条演示页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
width: 100%;
background-color: #CCC;
}
#processbar {
height: 13px;
width: 30%;
margin-top: 200px;
margin-left: 35%;
background-color: #fff;
border: 1px solid #999;
}
#processbar .finish {
height: 13px;
width: 40%;
background-color: #999;
}
</style>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#processbar").corner();
$("#processbar .finish").corner();
})
</script>
</head>
<body>
<div id="processbar">
<div class="finish"></div>
</div>
</body>
</html>
大家可以自己试试,样式大概如下:(低版本IE下可能会出问题,IE的兼容性大家自己研究)
这两行大家可以看到
<div id="processbar">
<div class="finish"></div>
</div>
其实就是定义了一个div,背景是白色,作为进度条背景。其中又是一个div,作为进度条,背景颜色是#999.
我们之后Jquery的目的就是动态改变进度条宽度,让他慢慢填充背景,最后达到100%。
0x02 setInterval函数的使用
该函数是一个和时间有关的函数。函数原型:
var timer = setInterval(codes, interval);
作用是每隔interval毫秒,执行一次codes。返回一个time对象。
这个函数很好使用,codes就填入一个函数,interval就填入相隔的时间就行。
另一个函数,clearInterval,作用是清除setInterval函数的执行。我们做一个进度条,总有到头的时候。当100%时,就用该函数清除定时器。
clearInterval函数有一个参数,是之前setInterval返回的那个time对象。
0x03 开始运行
var i = 0;
var timer = setInterval(function(){
$("#processbar .finish").css("width", i + "%");
i++;
if (i > 100) {
clearInterval(timer);
}
}, 10);
看以上代码。我们用i来表示当前进度,首先设置一个10毫秒执行一次的定时器。每次执行,调用css方法,改变finish这个div的宽度。
之后i自增。直到i > 100的时候,停止定时器。
于是,就完成了我们之前的效果:https://jsfiddle.net/noiping/p4hd7n7f/
- 【译】Spring官方教程:Spring Boot整合消息中间件RabbitMQ
- [实录]解决Migrator.Net 小bug
- Jenkins Pipeline插件十大最佳实践!
- Spring Cloud Hystrix的请求合并
- JQuery JCshare 0.1 分享插件
- Java中的即时编译(Just-in-time compilation)
- 无尽的忙碌换来幸福的日子
- 消费者驱动的微服务契约测试套件:Spring Cloud Contract
- 自己做的一个小程序 可采集、导出、模板、配置
- 分布式消息队列 RocketMQ 源码分析 —— Message 拉取与消费(上)
- .NET反射、委托技术与设计模式
- 我最常用的Intellij IDEA快捷键
- 用Js控制TextBox不能复制粘贴
- 漫画:什么是单例模式?(整合版)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- k8s 架构、基本概念及命令
- Java API 连接 Hbase示例
- 点线图和阶梯图的画法
- 添加直线的两种方式
- nginx fastcgi模块ngx_http_fastcgi_module详细解析、使用手册、完整翻译
- Chrome代码调试指南
- Maven安装与配置
- CentOS7安装elk,并监控Nginx的access.log日志
- Aria2 + Rclone 实现离线下载 | 完美脚本配置 | 解决无法上传问题
- alpine使用的避坑指南
- elasticSearch学习(八)
- Python自学成才之路 魔术方法之比较运算符,赋值运算符
- Go语言(golang)新发布的1.13中的Error Wrapping深度分析
- 使用k8s容器钩子触发事件
- Python自学成才之路 魔术方法之属性访问控制