一个简单的jquery进度条示例


Posted in Javascript onApril 28, 2014

用jQuery实现的最简单的进度条,只有不到10行代码。样式可以直接忽略。(有一个图片需要自己找一下)

一个简单的jquery进度条示例

[CSS]代码

$(function(){
    var i=0;
    (function progressBar(){
 i=i+1;
 if(i>=101){
    i=0;
 }
 $("#proc").animate({width:i+"%"},500);
 $("#progressWord").text(i+"%");
 setTimeout(progressBar,1500);
    })();
});

[CSS]代码

     .progress_out{
 position:relative;
 border:1px solid #3c4d60;
 -webkit-box-shadow: #666 0px 0px 3px;
 -moz-box-shadow: #666 0px 0px 3px;
 box-shadow: #666 0px 0px 3px;
 width:200px;
 height:40px;
}
.progress_inner{
 background-color: #DADAE4;
 width: 100%;
 height: 40px;
}
.progress_word{
 position:absolute;
 left:50%;
 top:24%;
 font-weight: bold;
}

[HTML]代码

<div id="outDiv" class="progress_out">
   <div id="progressbar" class="progress_inner">
 <img id="proc" src="/cdr/images/resource/processBar.png" width=0 height=40px />
   </div>
   <div id="progressWord" class="progress_word">0%</div>
</div>
Javascript 相关文章推荐
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
javascript处理表单示例(javascript提交表单)
Apr 28 #Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 #Javascript
node.js中的socket.io入门实例
Apr 26 #Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 #Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 #Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 #Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 #Javascript
You might like
php ftp文件上传函数(基础版)
2010/06/03 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
javascript 跳转代码集合
2009/12/03 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python中使用while循环的实例
2019/08/05 Python
如何给Python代码进行加密
2020/01/10 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
关于爱情的广播稿
2014/01/16 职场文书
初婚初育证明范本
2014/11/24 职场文书
2015元旦标语横幅
2014/12/09 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
节约用水广告语60条
2019/11/14 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis