jQuery实现的简单百分比进度条效果示例


Posted in Javascript onAugust 01, 2016

本文实例讲述了jQuery实现的简单百分比进度条。分享给大家供大家参考,具体如下:

一、JS Code:

<script type="text/javascript">
  var progressId = "ProgressBarID";
  function setProgressBar(progress) {
   if (progress) {
    $("#" + progressId + " > div").css("width", String(progress) + "%");
    $("#" + progressId + " > div").html(String(progress) + "%");
   }
  }
  var i_ProgressBar = 0;
  function doProgressBarLoading() {
   if (i_ProgressBar > 100) {
    alert("加载完毕?!!");
    return;
   }
   if (i_ProgressBar <= 100) {
    setTimeout("doProgressBarLoading()", 10);
    setProgressBar(i_ProgressBar);
    i_ProgressBar++;
   }
  }
  function setProgressBarCss() {
   $("#" + progressId + "").css({ "width": "300px", "height": "25px" });
   $("#" + progressId + " > div").css({ "height": "25px", "background-color": "#e0e0e0", "text-align": "center" });
  }
  $(document).ready(function () {
   setProgressBarCss();
   doProgressBarLoading();
  });
</script>

二、Html Code:

<div id="ProgressBarID">
 <div>
 </div>
</div>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS实现self的resend
Jul 22 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
AngularJS基础 ng-focus 指令简单示例
Aug 01 #Javascript
JavaScript中的对象继承关系
Aug 01 #Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 #Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 #Javascript
jQuery简单实现title提示效果示例
Aug 01 #Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 #Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 #Javascript
You might like
xajax写的留言本
2006/11/25 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
event.X和event.clientX的区别分析
2011/10/06 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
简单的js计算器实现
2016/10/26 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python pandas常用函数详解
2018/02/07 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
公积金转移接收函
2014/01/11 职场文书
2014年信访工作总结
2014/11/17 职场文书
2014年节能工作总结
2014/12/18 职场文书
遗嘱范文
2015/08/07 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
Python制作表白爱心合集
2022/01/22 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android