文档章节

实现纯手写的进度条

liangwt
 liangwt
发布于 2016/10/29 12:14
字数 421
阅读 71
收藏 2

最近在网上看到有人用python写了一个进度条,突发奇想也用jquery写了个,全部代码如下

<!DOCTYPE html>
<html>
<head>
	<title>progress-bar</title>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
		var length = 10;
		var index = 0;
		var d1=new Date();
		var begin = d1.getTime();
		$(".progress-bar").html("&nbsp;3kb/s");
		var sleep = setInterval(function(){
			$(".progress-bar").prepend("|");
			index ++;
			if(length<index){
				clearInterval(sleep);
				var d2=new Date();
				var end = d2.getTime();
				var content = $(".progress-bar").html().replace(/3kb\/s/,"ok&nbsp;time:"+((end-begin)/1000)+"s");
				$(".progress-bar").html(content);
			}
		},1000);
	})		
	</script>
</head>
<body>
	<div class="progress-bar"></div>
</body>
</html>

实现的效果如图:

原理十分简单,使用prepend()函数不断在字符串前添加符号即可

为了让每个字符延时输出,这里使用了setInterval()函数

setInterval()函数实现每隔固定时间执行函数,因此参数为一个函数和时间

clearInterval() 为清除定时执行

附setInterval()的详细用法

 

定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])
参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec

必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

定义和用法

clearInterval()方法的作用是清除对setInterval函数的调用

语法

clearInterval(intervalid);
参数 描述
intervalid 必需。setInterval函数后返回的对象


下面举一个简单的例子。
function show(){
    trace("每隔一秒显示一次");
}
var sleep;
sleep=setInterval(show,1000);

 

© 著作权归作者所有

liangwt
粉丝 8
博文 16
码字总数 18357
作品 0
南京
程序员
私信 提问
MBProgressHUD源码(上)

本篇博文记录MBProgressHUD源码学习过程,从官方提供的Demo项目入手,一步步了解其代码结构,学习它使用的技术,体会作者的编程思想。 一、结构 我们先来看下MBProgressHUD的结构,查看其类的...

苍穹Layne
06/19
0
0
6款新颖的jQuery和CSS3进度条插件

现在的网页功能越来越多,尤其是AJAX的广泛应用,进度条和Loading加载动画显得越来越重要了。下面给大家介绍几款比较新颖的jQuery和CSS3进度条Loading加载动画插件,希望对大家有帮助。 1、不...

ruby_chen
2013/03/05
47
0
进度条的2种实现方式1.js 2.纯css

Scroll Indicator称之为滚动指示器,是Web中常见的一种效果。用户滚动垂直滚动内容时,页面顶部有一个类似进度条的效果,当内容滚动到页面最低端,进度条效果填满整个进度条。感觉描述得有点...

筱飞
01/11
18
0
公众号开发笔记

本文的公众号包括了微信、支付宝两家公众号。适配包括Android和iOS。 首先是各自浏览器的内核,稍不注意就是坑。可以用代码检测一下内核以做适配。比如iOS系统支付宝和微信的浏览器内核貌似都...

HaiNiu0
2017/11/02
0
0
给最近正在找工作(iOS)的朋友一些建议/经验

众所周知, iOS开发找工作越来越难, 企业要求越来越高,一方面是资本寒冬期+七八月是企业招人淡季, 另外一方面也是iOS市场饱和。最近有出去看新机会, 所以下面记录一下面试XimalayaFM的大概过程...

jgCho
08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一套基于SpringBoot+Vue+Shiro 前后端分离 开发的代码生成器

一、前言 最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成 止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 controll...

郑清
22分钟前
2
0
javascript-十六进制随机颜色

<script> // 编写一个函数,获得一个十六进制的随机颜色的字符串(如#20CD4F) // function randomColor(){ // var r = random(0,255).toString(16); // var g = random(0,255).toString(16......

ACKo
24分钟前
2
0
springBoot +mybatis 出现sql 语句在数据库可以查询到,但是赋值到实体类上就没有的情况?

1.不要老是反复查看自己是否写错了,为啥有的能出来有的出不来? 可以查看配置文件中是否配置全: 如果在application.yml 文件中是如下配置: mybatis: mapper-locations: classpath:mapp...

kuchawyz
37分钟前
2
0
正则表达式

一、RegExp对象 进行验证和查找的API 1、创建对象: (1)用/创建(直接量):var reg=/正则/ig,表达式固定不变时使用 (2)用new创建:var reg=new RegExp(‘正则’,‘ig’),表达式需要...

wytao1995
37分钟前
2
0
实战限流(guava的RateLimiter)

关于限流 常用的限流算法有漏桶算法和令牌桶算法,guava的RateLimiter使用的是令牌桶算法,也就是以固定的频率向桶中放入令牌,例如一秒钟10枚令牌,实际业务在每次响应请求之前都从桶中获取...

程序员欣宸
38分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部