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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
微信小程序搭建自己的Https服务器
May 02 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
微信小程序实现下拉加载更多商品
Dec 29 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
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
node文件上传功能简易实现代码
2017/06/16 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
python中的常量和变量代码详解
2018/07/25 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
员工薪酬福利制度
2014/01/17 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
办公设备采购方案
2014/03/16 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
龙猫观后感
2015/06/09 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
如何撰写创业策划书
2019/06/27 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers