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 相关文章推荐
常用js脚本
Dec 03 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
javascript 节点排序 2
Jan 31 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
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
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
JQuery each打印JS对象的方法
2013/11/13 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
在双python下设置python3为默认的方法
2018/10/31 Python
python实现多层感知器
2019/01/18 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Python urllib.request对象案例解析
2020/05/11 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
最好的商品表达自己:Cafepress
2019/09/04 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
单位工作证明格式模板
2014/10/04 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
2015年班干部工作总结
2015/04/29 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
Python如何导出导入所有依赖包详解
2021/06/08 Python
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
python实现会员信息管理系统(List)
2022/03/18 Python
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS