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 NameSpace 简单说明介绍
Jul 18 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php xml常用函数的集合(比较详细)
2013/06/06 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
python中map、any、all函数用法分析
2015/04/21 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python requests模块实例用法
2019/02/11 Python
python右对齐的实例方法
2020/07/05 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
成考报名单位证明范本
2014/01/16 职场文书
税务会计岗位职责
2014/02/18 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
会议室使用管理制度
2015/08/06 职场文书
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫