jquery实现的一个简单进度条效果实例


Posted in Javascript onMay 12, 2014

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>

 
Javascript 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 #Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 #Javascript
Jquery Ajax方法传值到action的方法
May 11 #Javascript
json的定义、标准格式及json字符串检验
May 11 #Javascript
Jquery操作js数组及对象示例代码
May 11 #Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 #Javascript
如何防止回车(enter)键提交表单
May 11 #Javascript
You might like
php实现天干地支计算器示例
2014/03/14 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python unittest单元测试框架总结
2018/09/08 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
python中doctest库实例用法
2020/12/31 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
类的核心特性有哪些
2014/01/01 面试题
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
大学毕业生工作的自我评价
2013/10/01 职场文书
内科护士节演讲稿
2014/09/11 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
python如何读取.mtx文件
2021/04/22 Python
python中pandas对多列进行分组统计的实现
2021/06/18 Python
MYSQL常用函数介绍
2022/05/05 MySQL