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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
javascript实现简易聊天室
Jul 12 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
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 zend解密软件绿色版测试可用
2008/04/14 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
php时间函数用法分析
2016/05/28 PHP
phpinfo的知识点总结
2019/10/10 PHP
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
python查询mysql,返回json的实例
2018/03/26 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
Python实现把类当做字典来访问
2019/12/16 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
单位绩效考核方案
2014/05/11 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
事业单位考察材料范文
2014/12/25 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
幽默导游词开场白
2015/05/29 职场文书
素质拓展训练感想
2015/08/07 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技