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 相关文章推荐
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
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
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python Shapely使用指南详解
2020/02/18 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
《大自然的语言》教学反思
2014/04/08 职场文书
2014年度个人总结范文
2015/03/09 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
Mysql 如何查询时间段交集
2021/06/08 MySQL
Redis主从复制操作和配置详情
2022/09/23 Redis