一个简单的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 09 Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
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中intval()等int转换时的意外异常情况
2013/06/21 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
JS 自动安装exe程序
2008/11/30 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
详解flask表单提交的两种方式
2018/07/21 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python底层封装实现方法详解
2020/01/22 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
flask项目集成swagger的方法
2020/12/09 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
升职自荐信
2013/11/28 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
国旗下的演讲稿
2014/05/08 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
《刷子李》教学反思
2016/02/20 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers