jquery实现的一个简单进度条效果实例
更新时间：2014年05月12日 09:02:45 作者：
这篇文章主要介绍了jquery实现的一个简单进度条效果实例,很好的一个入门实例,从一个方面介绍了进度的实现原理,需要的朋友可以参考下
jquery实现一个进度条的效果，或许在这里没有什么实际的作用，但是已经实现了进度条的部分原理，前端是怎么实现那种进度效果的。
效果演示：
进度条实现源码：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现进度条</title>
<style>
.progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
#bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}
</style>
<script type="text/jscript" src="jquery.min.js"></script>
<script type="text/javascript">
function progressBar(){
//初始化js进度条
$("#bar").css("width","0px");
//进度条的速度，越小越快
var speed = 20;
bar = setInterval(function(){
nowWidth = parseInt($("#bar").width());
//宽度要不能大于进度条的总宽度
if(nowWidth<=200){
barWidth = (nowWidth + 1)+"px";
$("#bar").css("width",barWidth);
}else{
//进度条读满后，停止
clearInterval(bar);
}
},speed);
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="progressBar()" />
<div class="progressBar"><div id="bar"></div></div>
</body>
</html>
相关文章
本篇文章主要是对在页面上用action传递参数到后台出现乱码的解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面javascript能调用后台方法.这样就达到了无刷新.2011-09-09
这篇文章主要介绍了jQuery中each遍历的三种方法,结合实例形式分析了jQuery使用each遍历DOM元素的相关操作技巧,并附带了一个综合实例给予总结说明,需要的朋友可以参考下2018-09-09![jQuery学习笔记[1] jQuery中的DOM操作](//img.jbzj.com/images/xgimg/bcimg3.png)
jQuery中的DOM操作实现说明，学习DOM操作的朋友可以参考下。2010-12-12
这篇文章主要介绍了jQuery 回调函数（callback）的使用和基础,需要的朋友可以参考下2015-02-02
jquery.toArray()是将jQuery对象转换成数组,我们来分析下2014-06-06
这篇文章主要介绍了EasyUI框架 使用Ajax提交注册信息的实现代码的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了jquery html添加元素/删除元素操作,结合实例形式详细分析了jquery html添加元素/删除元素相关函数功能、用法及操作注意事项,需要的朋友可以参考下2020-05-05
jQuery中不仅可以使用选择器就行绝对定位，而且还可以进行相对定位，只要在$()中指定第二个参数，第二个参数就是相对的元素。第二个参数传递一个jQuery对象，则相对于这个对象为基准进行相对的选择。2011-04-04
本篇文章是对JQuery获取和设置Select选项的一些常用方法进行了汇总介绍，有需要的朋友可以参考一下2013-07-07
![jQuery学习笔记[1] jQuery中的DOM操作](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论