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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
百度小程序自定义通用toast组件
Jul 17 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
短波收音机简介
2021/03/01 无线电
PHP empty函数报错解决办法
2014/03/06 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
使用PHP开发留言板功能
2019/11/19 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
python PyTorch参数初始化和Finetune
2018/02/11 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python包和模块的分发详细介绍
2020/06/19 Python
pandas实现导出数据的四种方式
2020/12/13 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
保荐人的岗位职责
2013/11/19 职场文书
个人简历自荐信
2013/12/05 职场文书
单位绩效考核方案
2014/05/11 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL