jquery实现的一个简单进度条效果实例


Posted in Javascript onMay 12, 2014

jquery实现一个进度条的效果,或许在这里没有什么实际的作用,但是已经实现了进度条的部分原理,前端是怎么实现那种进度效果的。

效果演示:

jquery实现的一个简单进度条效果实例

进度条实现源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现进度条</title>
<style>
 .progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
 #bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}
</style>
<script type="text/jscript" src="jquery.min.js"></script>
<script type="text/javascript">
 function progressBar(){
  //初始化js进度条
  $("#bar").css("width","0px");
  //进度条的速度,越小越快
  var speed = 20;  bar = setInterval(function(){
   nowWidth = parseInt($("#bar").width());
   //宽度要不能大于进度条的总宽度
   if(nowWidth<=200){
    barWidth = (nowWidth + 1)+"px";
    $("#bar").css("width",barWidth);
   }else{
    //进度条读满后,停止
    clearInterval(bar);
   } 
  },speed);
 }
</script>
</head>

<body>
 <input type="button" value="开始" onclick="progressBar()" />
 <div class="progressBar"><div id="bar"></div></div>
</body>
</html>

 
Javascript 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
JS异步处理的进化史深入讲解
Aug 25 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 #Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 #Javascript
Jquery Ajax方法传值到action的方法
May 11 #Javascript
json的定义、标准格式及json字符串检验
May 11 #Javascript
Jquery操作js数组及对象示例代码
May 11 #Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 #Javascript
如何防止回车(enter)键提交表单
May 11 #Javascript
You might like
4.与数据库的连接
2006/10/09 PHP
php发送post请求函数分享
2014/03/06 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
php swoft框架实例用法
2020/12/22 PHP
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
简单介绍Python中的JSON模块
2015/04/08 Python
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
python实现两个文件合并功能
2018/04/01 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
某公司Java工程师面试题笔试题
2016/03/27 面试题
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
小学英语教学反思
2014/01/30 职场文书
网络工程师职业规划
2014/02/10 职场文书
垃圾桶标语
2014/06/24 职场文书
工商局个人工作总结
2015/03/03 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
飞屋环游记观后感
2015/06/08 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技
Win11快速关闭所有广告推荐
2022/04/19 数码科技