<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery实现进度条</title>
<style type="text/css">
body{
　　padding:30px;
　　margin-left:450px;
　　margin-top:200px;
　　width:350px;
　　border: 1px solid #98AFB7;
}
.progressBar{
　　width:280px;
　　height:20px;
　　border: 1px solid #98AFB7;
　　border-radius:8px;
　　background:#e1dfdf;
}
input{
　　margin-bottom:15px;
}
span{
　　position:relative;
　　top:-20px;
　　left:290px;
}
#bar {
　　width: 0px;
　　height: 20px;
　　border-radius: 7px;
　　background: #5EC4EA;
}
</style>

//引入Jquery文件

<script src="Jquerys/jquery.js"></script>
<script type="text/javascript">
function progressBar() {
　　$("#bar").css("width", "0px");
　　var speed =20;//进度条的速度

　　bar = setInterval(function () {
　　nowWidth = parseInt($("#bar").width());
　　if (nowWidth <= 279) {
　　　　var barWidth = (nowWidth + 1);
　　　　$("#bar").css("width", barWidth + "px");
　　　　var totla = parseInt($(".progressBar").width())
　　　　var ss = barWidth / totla * 100;

　　　　$("#span_s").text(ss);
　　　　var index = $("#span_s").text().indexOf(".");
　　　　if (index != -1) {
　　　　　　var context = $("#span_s").text().substring(0, index);
　　　　　　$("#span_s").text(context);
　　　　}
　　　　else {
　　　　　　$("#span_s").text(ss);
　　　　　　if (parseInt($("#span_s").text()) == 100) {
　　　　　　alert('完成');
　　　　　　}
　　　　}
　　} else {
　　　　　　clearInterval(bar);
　　　　}
　　}, speed);
}

</script>

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

这个进度条实特别简单，首先html里面的话就是一个div里面嵌套一个div，然后写好想要的样式就行，特效的实现也很简单就是，一个定时器里面写一个匿名函数里面实现也很简单，我这里是20毫秒执行一个匿名函数，里面的代码就是一次增加一个像素，当然你这里也可以用百分比去增加像素。介绍另外一种方法，也可以用动画去实现进度条的效果。。。。。。有兴趣的可以去尝试一下

html + css + jquery实现简单的进度条实例的更多相关文章

  1. HTML5+CSS+JQuery 实现简单的进度条功能

    样式: <style type="text/css"> .processcontainer2{ width:450px; border:1px solid #6C9C2 ...

  2. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果（精问）

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  3. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  4. 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  5. Winfrom 简单的进度条小程序

    使用Winform空间编写简单的进度条小程序: 所需控件:Lable 标签  TextBox  文本框  progressBar  进度条控件  timer 定时器 下面是源码及效果图: /// &l ...

  6. Linux shell 下简单的进度条实现

    Linux shell 下简单的进度条实现 [root@db145 ~]# cat print_process.sh function Proceess(){ spa='' i= ] do print ...

  7. PHP+jQuery开发简单的翻牌抽奖实例

    PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...

  8. jquery自带的进度条功能如何使用？

    弹出进度条:先做弹出的功能modal,再做进度条显示.在弹出的界面上增加进度条功能 $.ajax({ xhr: function() { var xhr = new window.XMLHttpReq ...

  9. 【css】如何实现环形进度条

    最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...

随机推荐

  1. win7、8上走网络打印机(需找驱动包，不能自动)

    不多说,直接上干货! 简而言之,就是, 第一步是,将电脑与打印机联上网,进行匹配,即连上网可以查找到打印机的型号. 第二步是,安装驱动. D:\Driver\HP LJP2015 PCL6(注意,这个 ...

  2. 解决iptables nat sctp协议无效的问题

    环境组网如下: A----->B-----C IP如下: A:1.1.1.1 B:1.1.1.2; 2.2.2.1 C:2.2.2.2 需求为,A 需要使用sctp连通C 在B机器上添加ipta ...

  3. 常见的接口与类 -- Comparable

    目录 1. 接口概述 2. 接口方法详读 3. 接口方法的实践操作 3.1  String和Integer对于compareTo()的实现 正文 接口Comparable 我们在字符串中见到过Comp ...

  4. Go RabbitMQ （一）

    RabbitMQ 简介 RabbitMQ是一个消息代理,用来负责接收和转发消息. 术语 生产者:生产者是负责发送消息的 队列:队列是RabbitMQ用来存储消息的,受主机内存和磁盘大小的限制,本质上是 ...

  5. sockets+proxychains代理，使内网服务器可以访问外网

    Socks5+proxychains做正向代理 1.         应用场景: 有一台能上外网的机子,内网机子都不能连外网,需求是内网机子程序需要访问外网,做正向代理. 2.         软件 ...

  6. nginx 学习笔记(3) nginx管理

    nginx可以通过向其发送信号来进行管理.默认情况下主进程的进程ID写到文件/usr/local/nginx/logs/nginx.pid中.当然也可以在配置文件中自定义该pid文件,自定义使用pid ...

  7. Eclipse编辑JS响应慢，复制粘贴卡顿的解决方案

    我使用的是官网标准版的eclipse4.3 for javaEE, 写JS时卡的简直无法忍受,尝试去掉所有的validate,包括菜单和项目属性中的都没作用. 整个人都急疯了~ 后来在项目根目录.pr ...

  8. Spring Framework’s WebDataBinder

    Last week, I was just outside our nation’s capital teaching Spring Web MVC Framework to a wonderful ...

  9. node.js 读取文件

    一般用法 var path = require("path"); var fs = require("fs"); //let filePath = path.j ...

  10. C# 代码占用的空间

    是不是代码会占用空间,如果一个程序初始化需要 100M 的代码,那么在他初始化之后,这些代码就没有作用了,他会不会占空间?本文经过测试发现,代码也是会占空间. 我写了2k个垃圾类代码,然后把他放在一个 ...