这次要分享的内容是我当时做项目的时候做的一个进度条的方法。
这个方法是用JS控制进度条进行读取的一个方法。
一:首先看一下进度条的显示:
这个代码用HTML代码写的,直接调用的产品的Framework
1:首先外面套几个DIV显示样式。
2:倒数第二层DIV里面提示显示百分比,并且给他一个显示百分比数的位置,定义一个Id为percentage。
3:最里面的DIV给他一个宽度和颜色,用来表示当前显示的进度,定义一个Id为progressbar。
二:下面用JS控制进度条的读取
首先我们先忽略掉那些页面的读取与请求,
大家想一想,我们要进行一个进度条的显示,首先要有两个参数,总数和当前数,只有获取到这两个数之后我们才能对进度条的进度进行计算。
第一步:定义一个总数sum和当前数number。
如何获取总数和当前数我们就不细说了,这些可以看个人因素更改。
第二步:从controller里面传过来总数,赋给定义的总数sum
第三步:定义一个定时器setInterval;
setInterval包含的参数有两个,一个是所要用的方法,一个是时间,多长时间执行一次。
(注意:这里定时器用的是setInterval而不是setTimeout,这是为什么呢,这俩定时器又有什么区别呢。据我所知setInterval可以循环使用,而setTimeout只能使用一次。当然有什么我说的不对的地方还望大家指正!)
第四步:定义方法
1:首先判断一下当前数是否小于总数,如果当前数等于总数了就说明进度条读取完了,这时候就要把定时器关闭。
2:而如过当前数小于总数,就执行此方法,方法首先获取到当前数,然后用当前数比上总数,获取百分比:。
3:把获取到的百分比分别赋值给
(1) 显示进度条颜色的DIV percentage的宽度
(2) 显示当前百分比提示的DIV下面的percentage
现在方法就完成了,把这个方法放到上面的定时器里面,也就是随着定时器的运行,每1秒会调用一下此方法,此方法会重新更新当前数,随着当前数的变化,进度条的带颜色DIV的宽度也会随之变化,当前进度提示信息也会跟着变化。
这样一个进度条就完成了。
虽然这个方法很简单,也许很多人都明白,但是毕竟是自己做出来的,在此分享一下,有什么做的不好的地方还望大家指正。
- 描述: zz
- 大小: 9.5 KB
- 大小: 16.8 KB
分享到:
相关推荐
PB进度条,可以显示百分比,而且背景是透明的 1、参考了PB自带的进度条例子 2、参考了网上的关于透明背景设置的文章
ProgressControl在VC++是一个重要的控件,初学者可通过此视频掌握进度条用法。
1、控件已封装,可直接使用; 2、pb9程序 3、演示地址:https://blog.csdn.net/weixin_37914760/article/details/106015536
这个是进度条的使用方法,包括两种,一种是水平的进度条,另一种是默认的圆圈的进度条。
进度条使用方法,使用多线程,可无卡顿显示进度条
Android ProgressBar安卓进度条应用实例集,包括了几乎全部的进度条用法,相信这个Android源码包对于想学习安卓应用开发的朋友来说,绝对是非常不错的,里面包括了ProgressBar进度条源码和ScrollImage源代码。
用两个方法实现进度条,切换,最小化恢复窗口,进度条正常,不假死!请用Microsoft Visual Studio 2008打开,或先执行EXE看看是否是自己需要的! 注: 下载资源时,看清楚此文档说明,我不是为了积分而放在这里,我...
使用setTimeout()方法模拟进度条
分享一款VB进度条控件及用法示例,风格和Windows的不太一样,平面型的进度条控件,有多种颜色风格,调用方法请参考源码,比较简单的,VB初学者更应该看一看。
本程序包含三个自定义的圆形进度条progressbar 程序代码比较少,主要通过XML布局实现 主要是学习自定义的圆形进度条的用法
android 自定义进度条 动态柱状图实现
详细的工程代码与注释,讲解Qt进度条QProgressBar的使用方法,完整的代码。
使用方法: 1.将fort.css和fort.js引用页面 [removed][removed] <link href="fort/fort.css" rel="stylesheet"> 2.将进度条展示div放进页面,最好放在顶部: <div class="top"><div class="colors"></div></...
圆形进度条需要自定义控件来实现 ,简单来说,只需要继承View 重写 onMeasure() 和 onLayout() 方法 重新绘制即可 ,其中也用到了自定义属性。可以直接拿来使用
这个是进度条的使用方法,包括两种,一种是水平的进度条,另一种是默认的圆圈的进度条.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
这是一个使用vue动态开发的进度条的小例子,里面同时涵盖了多种样式的属性值动态改变的方法。
网上很多进度条使用都不方便,自己用时特弄了一个,非常方便,有延时定义,有颜色定义,自动关闭延时窗口,供大家参考
Js/ProcessBar.js ----------Ajax方法以及设置进度条方法 Default.htm ---------------本示例 ProcessExecute.aspx -------后台执行插入数据库文件 演示:http://www.px915.com/Demo_ProcessBar/
使用方法:在需要显示提示窗口的单元中uses本单元,当需要显示提示信息时直接调用ShowXXXX过程即可。 注意事项:同一时间屏幕上只能显示一个进度窗体,窗体显示时其它所有窗体均不能使用,但显示该窗体的代码仍...
在C#的WinForm程序开发中,进度条的实时展示需要经过简单编码实现,通过直接采用WinForm自带的... 本演示程序把进度条窗口与调用程序分开,根据需要,通过对本演示程序调用部分的数据处理程序修改即可满足实际使用。