Javascript 写的简单进度条控件

很多的时候用户需要等待你“臃肿”的 Javascript 代码处理完成（Web 2.0 的特色）。期间或许加入一个类似于进度条的东西让用户有点“安慰”。这个东西实现起来并不复杂，无非就是获得总的处理条目，然后获得一个百分比，再显示输出。

通过我们伟大的 CSS，可以实现非常漂亮的进度条样式。加上 Javascript 的效果，就可以完全“欺骗”我们的用户，让他们有耐心等待浏览器处理完成。上述的原理已经知道了，那么就可以直接看代码了。本人使用的还是 jQuery 框架，因为这样简短的代码可能会更容易理解。

当然这个控件还有很多需要完成的地方，我仅仅是提供了一种遵循 Web 标准的实现思路。废话不多说，有时间的话可以点击这里看下 在线演示

赞 (0)

相关推荐

  • Javascript jquery css 写的简单进度条控件

    通过我们伟大的 CSS,可以实现非常漂亮的进度条样式.加上 Javascript 的效果,就可以完全"欺骗"我们的用户,让他们有耐心等待浏览器处理完成.上述的原理已经知道了,那么就可以直接看代码了.本人使用的还是 jQuery 框架,因为这样简短的代码可能会更容易理解. 当然这个控件还有很多需要完成的地方,我仅仅是提供了一种遵循 Web 标准的实现思路.废话不多说. Javascript Progress Bar Demo - jb51.net #progress {backgroun

  • PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足

  • javascript实现简单的进度条

    示例一: <!doctype html> <html> <head> <meta charset="utf8"> <title>Process Bar</title> <script> var t; function s(c) { if(c<=100) { val.style.width=c+"%"; percent.innerHTML=c+"%"; btn

  • 原生javascript模仿win8等待提示圆圈进度条

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简单介绍 原生javascript编写,需要理解js基于面向对象编程和圆形坐标计算! 实现原理:把每个圆点抽象成一个对象(ProgressBarWin8类型),将每个圆点对象存在数组中(progressArray),延迟执行每个圆点对象的run方法,至于圆点运行速度越来越快,是通过改变定时器延迟毫秒数

  • JavaScript 进度条实现代码(Firefox等相似浏览器下不支持)

    复制代码 代码如下: [code] <script type="text/javascript"> var loading = { element: null, count: 0, ID: 0, createLoading: function(parent, width, height){ //用于生成外围的进度条框 loading.element = document.createElement("div"); loading.element.id =

  • javascript 进度条 实现代码

    javascript 进度条 实现代码

    首先:建立两个类,一个是用来与资料进行连接(数据层),另一个是用来关联前一个类与页面的(逻辑层) 新建一个JScsrip.js 文件 代码如下: 复制代码 代码如下: function setPgb(pgbID, pgbValue,pvalues) { if ( pgbValue <= pvalues ) { if (lblObj = document.getElementById(pgbID+'_label')) { lblObj.innerHTML =Math.ceil((pgbValue/

  • javascript 进度条的几种方法

    javascript 进度条的几种方法

    我们先看看最终效果: 第一步,基本 构建基本的代码,看效果演示: 制作进度条的两种方法 *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /*进度条样式*/ .progressbar_1{ background-color:#eee; height:16px; width:150px; border:

  • javascript 实现页面加载进度条代码

    javascript 实现页面加载进度条代码

    New Document 加载中,请耐心等待 '); window.onload = function () { document.getElementById('loadbox').style.display="none"; document.getElementById('imglist').style.display="block"; } // --> 欧文加油! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • Javascript 写的简单进度条控件

    很多的时候用户需要等待你"臃肿"的 Javascript 代码处理完成(Web 2.0 的特色).期间或许加入一个类似于进度条的东西让用户有点"安慰".这个东西实现起来并不复杂,无非就是获得总的处理条目,然后获得一个百分比,再显示输出. 通过我们伟大的 CSS,可以实现非常漂亮的进度条样式.加上 Javascript 的效果,就可以完全"欺骗"我们的用户,让他们有耐心等待浏览器处理完成.上述的原理已经知道了,那么就可以直接看代码了.本人使用的还是

  • Android自定义View圆形进度条控件（三）

    Android自定义View圆形进度条控件（三）

    继续练习自定义View,这次带来的圆形进度条控件与之前的圆形百分比控件大同小异,这次涉及到了渐变渲染以及画布旋转等知识点,效果如下: 虽然步骤类似,但是我还是要写,毕竟基础的东西就是要多练 1.在res/values文件夹下新建attrs.xml文件,编写自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="Circ

  • Android的进度条控件描述

     一.ProgressBar进度条 在某项延续性工作的进展过程中为了不让用户觉得程序死掉了,需要有个活动的进度条,表示此过程正在进行中. 用户浏览网页的时候,中间肯定有个传输过程,所以用进度条让用户耐心等待.再比如在下载应用中,它也会有进度条显示下载进度. ProgressDialog是继承自Android.app.ProgressDialog所设计的互动对话窗口,应用时,必须新建ProgressDialog对象,运行时会弹出"对话框"作为提醒,此时应用程序后台失去焦点,直到进程结束后

  • Android自定义view实现水波进度条控件

    通过自定义view实现了一个水滴滴落到水波面,溅起水花并且水波流动上涨的进度条控件.之前看到过好多水波流动的进度条,感觉欠缺些东西,就想到了水滴到水平面,溅起水花然后水流动上涨的进度条效果,于是自己动手写了出来.效果如下,视频录制有些卡顿,实际会流畅很多. 一.用法 1.布局文件中添加WaveProgressView,circleColor属性为圆环颜色,waterColor属性为水波水滴的颜色,progress属性为初始的进度 <com.yhongm.wave_progress_view.Wa

  • Android利用Paint自定义View实现进度条控件方法示例

    Android利用Paint自定义View实现进度条控件方法示例

    前言 View的三大流程:测量,布局,绘制,自定义View学的是啥?无非就两种:绘制文字和绘制图像. 我们在上一篇文章<Android绘图之Paint的使用>中学习了Paint的基本用法,但是具体的应用我们还没有实践过.从标题中可知,本文是带领读者使用Paint,自定义一个进度条控件. 效果图 上图就是本文要实现的效果图. 实现过程 既然是自定义控件,本文的该控件是直接继承View,然后重写View的onMeasure和onDraw方法来实现.其中onMeasure主要作用是测量控件的宽/高.

  • Python tkinter进度条控件(Progressbar)的使用

    Python tkinter进度条控件(Progressbar)的使用

    进度条的作用就是提示用户进度信息.可以有两种方式: 1)提示完成度 比如,正在安装程序的进度,一般是从0%到100%. 2)提示正在进行处理 比如正在处理数据内容,并不知道何时能够处理完毕.这个时候的进度是提示用户有任务正在进行.此类的提示没有完成度提示,只是进度条来回往复的移动,表示任务正在进行中. 进度条对象是定义在ttk中的,使用的时候需要引入ttk包. 1 属性 属性 描述 cursor 鼠标位于进度条内时的形状 length 进度条长度 maximum 进度条最大刻度值 mode 进度

  • android ListView和ProgressBar(进度条控件)的使用方法

    android ListView和ProgressBar(进度条控件)的使用方法

    ListView控件的使用:ListView控件里面装的是一行一行的数据,一行中可能有多列,选中一行,则该行的几列都被选中,同时可以触发一个事件,这种控件在平时还是用得很多的.使用ListView时主要是要设置一个适配器,适配器主要是用来放置一些数据.使用起来稍微有些复杂,这里用的是android自带的SimpleAdapter,形式如下:android.widget.SimpleAdapter.SimpleAdapter(Context context, List<? extends Map<

  • Android进度条控件progressbar使用方法详解

    Android进度条控件progressbar使用方法详解

    一.简介 二.方法 1)进度条ProgressBar使用方法 1.在layout布局文件中创建ProgressBar控件 <ProgressBar style="?android:attr/progressBarStyleHorizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:progress="30&

  • 用htc实现进度条控件

    复制代码 代码如下: <PUBLIC:COMPONENT> <PUBLIC:METHOD   NAME ="Init" INTERNALNAME ="fnCreateProgressBar" /> <PUBLIC:METHOD   NAME ="showProgress" INTERNALNAME ="showProgress" /> <PUBLIC:PROPERTY NAME=&qu

随机推荐