这次要分享的内容是我当时做项目的时候做的一个进度条的方法。
这个方法是用JS控制进度条进行读取的一个方法。
一:首先看一下进度条的显示:
这个代码用HTML代码写的,直接调用的产品的Framework

[img]http://dl2.iteye.com/upload/attachment/0103/1238/8c3805ca-8fd9-302a-bafa-41ad9c756d9f.png[/img]

1:首先外面套几个DIV显示样式。
2:倒数第二层DIV里面提示显示百分比,并且给他一个显示百分比数的位置,定义一个Id为percentage。
3:最里面的DIV给他一个宽度和颜色,用来表示当前显示的进度,定义一个Id为progressbar。
二:下面用JS控制进度条的读取

[img]http://dl2.iteye.com/upload/attachment/0103/1240/14abec19-aa6a-318e-ab80-273514694311.png[/img]

首先我们先忽略掉那些页面的读取与请求,
大家想一想,我们要进行一个进度条的显示,首先要有两个参数,总数和当前数,只有获取到这两个数之后我们才能对进度条的进度进行计算。
第一步:定义一个总数sum和当前数number。
如何获取总数和当前数我们就不细说了,这些可以看个人因素更改。
第二步:从controller里面传过来总数,赋给定义的总数sum
第三步:定义一个定时器setInterval;
setInterval包含的参数有两个,一个是所要用的方法,一个是时间,多长时间执行一次。
(注意:这里定时器用的是setInterval而不是setTimeout,这是为什么呢,这俩定时器又有什么区别呢。据我所知setInterval可以循环使用,而setTimeout只能使用一次。当然有什么我说的不对的地方还望大家指正!)
第四步:定义方法
1:首先判断一下当前数是否小于总数,如果当前数等于总数了就说明进度条读取完了,这时候就要把定时器关闭。
2:而如过当前数小于总数,就执行此方法,方法首先获取到当前数,然后用当前数比上总数,获取百分比:。
3:把获取到的百分比分别赋值给
(1) 显示进度条颜色的DIV percentage的宽度
(2) 显示当前百分比提示的DIV下面的percentage
现在方法就完成了,把这个方法放到上面的定时器里面,也就是随着定时器的运行,每1秒会调用一下此方法,此方法会重新更新当前数,随着当前数的变化,进度条的带颜色DIV的宽度也会随之变化,当前进度提示信息也会跟着变化。
这样一个进度条就完成了。
虽然这个方法很简单,也许很多人都明白,但是毕竟是自己做出来的,在此分享一下,有什么做的不好的地方还望大家指正。