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 相关文章推荐
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
vue和小程序项目中使用iconfont的方法
May 19 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php下载文件,添加响应头的简单实例
2016/09/22 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
python中MySQLdb模块用法实例
2014/11/10 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python格式化输出%s和%d
2018/05/07 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
班主任2015新年寄语
2014/12/08 职场文书
团委工作总结2015
2015/04/02 职场文书
三国演义读书笔记
2015/06/25 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js