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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
AJAX检测用户名是否存在的方法
Mar 24 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
一套带网友答案的.NET笔试题
2016/12/06 面试题
银行会计职员个人的自我评价
2013/09/29 职场文书
中英文求职信范文
2014/01/27 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB