jQuery实现进度条效果代码


Posted in Javascript onDecember 17, 2015

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>jQuery进度条效果代码</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.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>

以上就是jQuery实现进度条效果代码,希望对大家的学习jquery程序设计有所帮助

Javascript 相关文章推荐
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
JavaScript创建对象的方式小结(4种方式)
Dec 17 #Javascript
javascript日期格式化方法小结
Dec 17 #Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 #Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 #Javascript
详解js图片轮播效果实现原理
Dec 17 #Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 #Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 #Javascript
You might like
中篇:安装及配置PHP
2006/12/13 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Python translator使用实例
2008/09/06 Python
Python @property装饰器原理解析
2020/01/22 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
大学生优秀的自我评价分享
2013/10/22 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
幼儿园新年寄语
2014/04/03 职场文书
奶茶店创业计划书
2014/08/14 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
先进基层党组织材料
2014/12/25 职场文书
举起手来观后感
2015/06/09 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python