jquery实现模拟百分比进度条渐变效果代码


Posted in Javascript onOctober 29, 2015

本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考,具体如下:

这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样。

运行效果截图如下:

jquery实现模拟百分比进度条渐变效果代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>jquery模拟百分比进度条</title>
<script type='text/javascript' src='jquery1.3.2.js'></script>
<style>
#loading{ background:url(bak.png) 0 0 no-repeat; width:397px; height:49px;}
#loading div{ background:url(pro.png) 0 0 no-repeat; line-height:49px;height:49px; text-align:right;}
</style>
<script type="text/javascript">
var progress_id ="loading";
function SetProgress(progress) {
if (progress) {
$("#" + progress_id +" > div").css("width",String(progress) + "%"); //控制#loading div宽度
$("#" + progress_id +"> div").html(String(progress) + "%"); //显示百分比
}
}
var i = 0;
function doProgress() {
if (i > 100) {
$("#message").html("恭喜您,歌曲上传成功!").fadeIn("slow");//加载完毕提示
return;
}
if (i <= 100) {
setTimeout("doProgress()",500);
SetProgress(i);
i++;
}
}
$(document).ready(function() {
doProgress();
});
</script>
</head>
<body>
<div id="message"></div>
<div id="loading"><div>
</body>
</html>

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

Javascript 相关文章推荐
Javascript 面向对象 重载
May 13 Javascript
jquery ui对话框实例代码
May 10 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
js闭包的9个使用场景
Dec 29 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 #Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 #Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 #Javascript
JavaScript操作URL的相关内容集锦
Oct 29 #Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 #Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 #Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 #Javascript
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
使PHP自定义函数返回多个值
2006/11/26 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
javascript常用方法汇总
2014/12/02 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
python使用socket进行简单网络连接的方法
2015/04/29 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
统计员岗位职责
2013/11/14 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
军训教官感言
2014/03/02 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
农业生产宣传标语
2014/10/08 职场文书
海上钢琴师观后感
2015/06/03 职场文书