用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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery 圆形进度条

    最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使...

    用户8983410
  • 好用的jQuery工作进度条

    对于进度条,在HTML5下有个新标签就是用来呈现任务的进度,鉴于目前很多旧式浏览器还不完全支持HTML5,大家都喜欢用javascript和css实现进度条的功...

    崔文远TroyCui
  • 喜欢用Python做爬虫吗?进度条了解下?自制一个进度条模块!

    我们在做Python爬虫脚本的时候,往往希望在运行的过程中可以实时查看到我的下载进度!之前我也一直想实现这个功能(绝对不是为了炫(装)耀(*)),也查看了很多博...

    云飞
  • CSS3 做一个有闪光效果的进度条

    CSS3 做一个有闪光效果的进度条 今天刚入职的小前端看到一个进度条的效果,想要实现,但是不知道如何下手,于是,我写了一个demo给它看下。 最终效果:CSS3...

    FungLeo
  • jQuery实现的进度条效果

    用户8983410
  • 用 jQuery 和 Bootstrap 在 WordPress 中添加进度条

    昨天整理了一下Genesis的系列教程的翻译进度,汇总成了一个页面 神级 WordPress 主题框架 Genesis 从入门到精通 。今天突然想放一个进度条...

    丘壑
  • shell的一个进度条 原

    domain0
  • python3-打印一个进度条

    py3study
  • 如何实现一个下载进度条/播放进度条

    技术上没太大难度,有难度的地方是怎么让整个动画比较流畅。一个主要问题是动画的滞后性:当下载进度到某个点的时候,你再用250ms的动画过渡过去,这个时候已经慢了,...

    Nealyang
  • shell实现了一个进度条

    用户3765803
  • jQuery实现可拖动控制进度条

    王小婷
  • 用MediaPlayer做个带进度条可后台的音乐播放器

    sean_yang
  • python--做远程scp的进度条

    其中threading为多线程函数,multiprocessing为多进程函数(本处使用进程)

    py3study
  • jQuery实现上传文件获取进度条

    明知山
  • 用Python给程序加个进度条

    用户1634449
  • 进度条使用

    ProgressBar是Android下的进度条,也是为数不多的直接继承于View类的控件.

    李小白是一只喵
  • asp.net 的一个简单进度条功能

    我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的)

    冰封一夏
  • 如何用Python写个文本进度条?

    程序员Bob(ID:gh_8a1a1530d0bf) 第218次推文 图源:小张

    小Bob来啦
  • 开发 | 手把手,教你在小程序里做一个圆形进度条

    今天想把之前在微信小程序开发过程中,制作的一个圆形进度条做成一个组件,方便以后直接拿来用。

    知晓君

扫码关注云+社区

领取腾讯云代金券