jQuery实现的进度条效果


Posted in Javascript onJuly 15, 2015

在某些特定的场景下,应用进度条效果,可以提高网站的人性化程度,能够让用户能够掌握进度,增加对进度的耐心,否则可能直接导致关闭页面,从来导致网站流失用户,下面就是用过jQuery实现的进度效果代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三水点靠木</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
#progress 
{
 background:white;
 height:20px;
 padding:2px;
 border:1px solid green;
 margin:2px;
}
#progress span 
{
 background:green;
 height:16px;
 text-align:center;
 padding:1px;
 margin:1px;
 display:block;
 color:yellow;
 font-weight:bold;
 font-size:14px;
 width:0%;
}
</style>
<script type="text/javascript"> 
 var progress_node_id = "progress"; 
 function SetProgress(progress) { 
  if (progress) { 
   $("#" + progress_node_id + " > span").css("width", String(progress) + "%"); 
   $("#" + progress_node_id + " > span").html(String(progress) + "%"); 
  } 
 } 
 var i = 0; 
 function doProgress() { 
 if (i > 100) { 
  alert("Progress Bar Finished!"); 
  return; 
 } 
 if (i <= 100) { 
  setTimeout("doProgress()", 500); 
  SetProgress(i); 
  i++; 
 } 
 } 
 $(document).ready(function() { 
  doProgress(); 
 }); 
</script>
</head>
<body>
<h1>jQuery实现进度条效果代码</h1>
<p>原理就是使用 Javascript 控制 SPAN CSS 的宽度(以及其他的样式),刷新查看</p>
<div id="progress"><span></span></div>
</body>
</html>

以上代码实现了常用的进度条效果,在进度条推进的时候有百分比标注,非常的人性化。

Javascript 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 #Javascript
jQuery的事件委托实例分析
Jul 15 #Javascript
jQuery的end()方法使用详解
Jul 15 #Javascript
浅谈$(document)和$(window)的区别
Jul 15 #Javascript
浅谈window对象的scrollBy()方法
Jul 15 #Javascript
jQuery的bind()方法使用详解
Jul 15 #Javascript
纯JavaScript实现的分页插件实例
Jul 14 #Javascript
You might like
php实现mysql数据库备份类
2008/03/20 PHP
组合算法的PHP解答方法
2012/02/04 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
同事打架检讨书
2014/02/04 职场文书
学校评语大全
2014/05/06 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
毕业论文致谢词
2015/05/14 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书