jquery 简单的进度条实现代码

 更新时间:2010年03月11日 16:54:04   转载 作者:  
jquery其实是有个进度条插件的,叫做jqueryprogressbar.js,可是想练习一下,就没有用,自己写了点代码。这个代码其实是参考别人的,因为自己的JS基础不是很好。

其实我本来的计划是做网页设计师的,可是没有人认为我设计的好,哥到现在还没有工作,发泄一下,不多说了。

效果图

需要用到的图片:

背景图片:

进度显示图片:

网页结构:

复制代码 代码如下:

<div id="center">
<div id="message"></div>
<div id="loading"><div></div></div>
</div>

css代码:
代码
复制代码 代码如下:

#center{
margin:50px auto;
width:400px;
}
#loading{
width:397px;
height:49px;
background:url(bak.png) no-repeat;
}
#loading div{
width:0px;
height:48px;
background:url(pro.png) no-repeat;
color:#fff;
text-align:center;
font-family:Tahoma;
font-size:18px;
line-height:48px;
}
#message{
width:200px;
height:35px;
font-family:Tahoma;
font-size:12px;
background-color:#d8e7f0;
border:1px solid #187CBE;
display:none;
line-height:35px;
text-align:center;
margin-bottom:10px;
margin-left:50px;

JavaScript代码:
代码
复制代码 代码如下:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<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()", 100);
SetProgress(i);
i++;
}
}
$(document).ready(function() {
doProgress();
});
</script>

相关文章

  • ajax图片上传,图片异步上传,更新实例

    ajax图片上传,图片异步上传,更新实例

    本篇文章主要介绍了ajax图片上传,图片异步上传,更新,具有一定的参考价值,有想去的可以了解一下。
    2016-12-12
  • jQuery 选择器理解

    jQuery 选择器理解

    凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.
    2010-03-03
  • jquery实现可自动收缩的TAB网页选项卡代码

    jquery实现可自动收缩的TAB网页选项卡代码

    这篇文章主要介绍了jquery实现可自动收缩的TAB网页选项卡代码,涉及jquery鼠标事件及页面元素样式变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 如何用jquery控制表格奇偶行及活动行颜色

    如何用jquery控制表格奇偶行及活动行颜色

    这篇文章主要介绍了如何用jquery控制表格奇偶行及活动行颜色,需要的朋友可以参考下
    2014-04-04
  • jquery读取xml文件实现省市县三级联动的方法

    jquery读取xml文件实现省市县三级联动的方法

    这篇文章主要介绍了jquery读取xml文件实现省市县三级联动的方法,涉及jQuery操作XML文件及Ajax动态加载的技巧,需要的朋友可以参考下
    2015-05-05
  • JQuery从头学起第二讲

    JQuery从头学起第二讲

    在第一讲中,已经对JQuery做了入门级的介绍,我相信看过的网友都应该知道怎么开始写一个简单的JQuery程序了。首先是需要引入一个JQuery包,其次是根据JQuery的语法写代码就可以了。
    2010-07-07
  • 深入理解jQuery中live与bind方法的区别

    深入理解jQuery中live与bind方法的区别

    本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 基于Jquery代码实现支持PC端手机端幻灯片代码

    基于Jquery代码实现支持PC端手机端幻灯片代码

    支持PC端手机端幻灯片代码是一款支持移动触摸,支持鼠标拖拽切换,支持带进度条的自动播放模式,本文给大家分享一款基于jquery代码实现支持pc端手机端幻灯片代码,感兴趣的朋友一起学习吧
    2015-11-11
  • jQuery实现遍历XML节点和属性的方法示例

    jQuery实现遍历XML节点和属性的方法示例

    这篇文章主要介绍了jQuery实现遍历XML节点和属性的方法,涉及jQuery针对xml文件的加载、节点遍历等相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • jquery 笔记 事件

    jquery 笔记 事件

    写js已经有很久了,但是对js的详细了解还是很肤浅的,这几天在看jquery,在其中有一些新的发现和体会,记录下来
    2011-11-11

最新评论