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游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
详解vue.js的devtools安装
May 26 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
Python实现GUI学生信息管理系统
2020/04/05 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
parser.add_argument中的action使用
2020/04/20 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
keras中的backend.clip用法
2020/05/22 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
eBay德国站:eBay.de
2017/09/14 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
Delphi CS笔试题
2014/01/04 面试题
个性与发展自我评价
2014/02/11 职场文书
单位委托函范文
2015/01/29 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL