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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
package.json各个属性说明详解
Mar 11 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 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函数代码
2013/08/29 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
如何在JS文件中获取Vue组件
2020/09/16 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
对Django外键关系的描述
2019/07/26 Python
Django之路由层的实现
2019/09/09 Python
浅谈Python 参数与变量
2020/06/20 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
园林施工员岗位职责
2013/12/11 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
幼儿园运动会口号
2014/06/07 职场文书
个人授权委托书范文
2014/09/21 职场文书
商务代表岗位职责
2015/02/15 职场文书
离婚被告答辩状
2015/05/22 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书