文档章节

实现纯手写的进度条

liangwt
 liangwt
发布于 2016/10/29 12:14
字数 421
阅读 69
收藏 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
17
0
给最近正在找工作(iOS)的朋友一些建议/经验

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

jgCho
08/03
0
0
公众号开发笔记

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

HaiNiu0
2017/11/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
今天
9
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
今天
6
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
今天
8
0
Flutter 系列之Dart语言概述

Dart语言与其他语言究竟有什么不同呢?在已有的编程语言经验的基础上,我们该如何快速上手呢?本篇文章从编程语言中最重要的组成部分,也就是基础语法与类型变量出发,一起来学习Dart吧 一、...

過愙
今天
5
0
rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部