Javascript 写的简单进度条控件

2016-02-19 08:59 7 1 收藏

下面图老师小编跟大家分享一个简单易学的Javascript 写的简单进度条控件教程，get新技能是需要行动的，喜欢的朋友赶紧收藏起来学习下吧！

【 tulaoshi.com - Web开发】

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

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

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

来源:https://www.tulaoshi.com/n/20160219/1589102.html

上一篇：从默认到平铺更改Windows7文件夹设置方式
下一篇： Android画图并保存图片的具体实现代码

看过《Javascript 写的简单进度条控件》的人还看了以下文章更多>>

进度条 - 步骤教程

标签： flash教程

1。首先在场景上画上一个长条状的进度条 2。选取这个进度条之后按 F8 把它转换成Movieclip影片，记得“注册点”必须在左边 3。转换成影片之后设定实例名 loader ，再来编辑这个影片 4。制作100个帧的的进度，然后增加一个图层并增加一个停止播放的指令 5。回到场景，在第一帧输入以下代码 6。在第二帧开始加入你们的...

无尽的进度条攻略

《无尽的进度条Progress Quest》部分法术效果攻略提示1：《无尽的进度条》为半即时回合制游戏，即那种战斗开始后敌我都有行动条，走到头才能行动的回合制。瞬移：有一定几率让你无视速度，立刻行动，几率随法术等级上升。兔子的正义铁拳：召...

Flash制作进度条教程

标签： flash教程

本文由中国 txwh2006（踏雪无痕）原创，转载请保留此信息！这几天为了制作网页，需要做个进度条，无奈以前不注意，至今还不会做，只得看网上教程来学习。网上教程虽然不少，但其实版本雷同，真要学还不如意，有的教程号称“最简单”，他给你一段代码，叫你哭笑不得，人家会的高手，他也不在乎你一段代码，菜鸟们看了也不懂；...

AJAX实例：动态进度条

标签： Web开发

1.建立进度条html页面 progressbar.htm script language="javascript" function setPgb(pgbID, pgbValue) { if ( pgbValue = 100 ) { //debugger; if (lblObj = document.getElementById(pgbID+'_label')) { lblObj.innerHTML = pgbValue + '%'; // change the label value } if ( pgbObj = document.getElementBy...

Photoshop简单绘制绚丽色彩的进度条

标签： PS PS基础

今天分享一个进度条的做法，利用图层样式来打造一个色彩绚丽的进度条，按照国际惯例，我们提供PSD的下载，PSD中包含了6种不同色彩的进度条，希望你喜欢。教程源文件：绚丽色彩的网页进度条PSD源文件先看看效果图新建个文档，我这里用的是800*800像素，填充黑色，并设置一个图层样式。将背景图层转换为智能对象，执...

查看更多精彩>>