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 相关文章推荐
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
基于react框架使用的一些细节要点的思考
May 31 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
javascript的this关键字详解
May 20 Javascript
原生js实现3D轮播图
Mar 21 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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
UNIX文件名称有什么规定
2013/03/25 面试题
小学班长竞选演讲稿
2014/04/24 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
2014年体育工作总结
2014/11/24 职场文书
2014年度考核工作总结
2014/12/24 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
goland 设置project gopath的操作
2021/05/06 Golang