样式:

<style type="text/css">
.processcontainer2{
width:450px;
border:1px solid #6C9C2C;
height:25px;
border-radius: 10px;
box-shadow: 5px 10px 20px lightgray;
}
#processbar2{
background:green;
float:left;
height:100%;
text-align:center;
line-height:150%;
border-radius: 10px;
color: white;
}
</style>

关键HTML代码:

<body>
<div class="processcontainer2">
<div id="processbar2">0</div>
</div>
</body>

脚本:

    <script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript">
function gogogo(){
var bar=$("#processbar2");
$(bar).html(parseInt($(bar).html())+1+"%")
$(bar).css("width",$(bar).html())
console.log($(bar).html())
//进度条满
if($(bar).html()=="100%"){
window.clearInterval(start);
}
}
var start=setInterval(function(){gogogo()},50);
$(document).ready(function(){
start;
})
</script>

效果:

HTML5+CSS+JQuery 实现简单的进度条功能的更多相关文章

  1. html + css + jquery实现简单的进度条实例

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  2. jquery自带的进度条功能如何使用?

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

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

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

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

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

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

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

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

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

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

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

  8. .Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能

    .Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能 我的项目需求是:在.net4.5中用mvc5实现上传xml文件,后台实时导入数据库时传到前台进度, ...

  9. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

随机推荐

  1. 环境变量之classpath配置和临时配置

    前言 本篇文章介绍classpath环境变量的配置和一个环境变量配置的技巧:临时配置path环境变量. 正文 classpath环境变量配置 在上完了"Hello World"这堂 ...

  2. celery订单定时回滚

    目录 订单回滚 控制执行(多少时间后执行) celery异步定时任务 订单回滚 用celery异步,定时任务.可以设置:如果下单15分钟后没有支付,则取消订单.做反向操作 控制执行(多少时间后执行) ...

  3. LeetCode-矩形重叠

    题目描述: 矩形以列表 [x1, y1, x2, y2] 的形式表示,其中 (x1, y1) 为左下角的坐标,(x2, y2) 是右上角的坐标. 如果相交的面积为正,则称两矩形重叠.需要明确的是,只在 ...

  4. 五分钟完成 ABP vNext 通讯录 App 开发

    五分钟完成 ABP vNext 通讯录 App 开发 ABP vNext(后文简称Abp)是 Volo 公司堪称艺术品级的应用开发框架,它基于领域驱动设计(DDD)的思维,创新地采用了模块化的设计.A ...

  5. qt creator源码全方面分析(3-5)

    目录 qtcreatorlibrary.pri 使用实例 上半部 下半部 结果 qtcreatorlibrary.pri 上一章节,我们介绍了src.pro,这里乘此机会,把src目录下的所有项目文件 ...

  6. File判断功能(新手)

    //导入的一个类.import java.io.File;/* File判断功能*///创建的一个类.public class zylx3 { //公共静态的主方法. public static vo ...

  7. 大数据软件安装之Azkaban(任务调度)

    一.安装部署 1.安装前准备 1)下载地址:http://azkaban.github.io/downloads.html 2)将Azkaban Web服务器.Azkaban执行服务器.Azkaban ...

  8. Linux下MySQL主主同步

    主主复制:主从相互授权连接,读取对方binlog日志并更新到本地数据库的过程:只要对方数据改变,自己就跟着改变. 本节介绍主主复制模式的配置. 前提条件 已安装MySQL两台服务器.服务器规划示例如表 ...

  9. 原创 记录一次线上Mysql慢查询问题排查过程

    背景 前段时间收到运维反馈,线上Mysql数据库凌晨时候出现慢查询的报警,并把原始sql发了过来: --去除了业务含义的sql update test_user set a=1 where id=1; ...

  10. hdu3294 Manacher算法模板

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3294/ 回文长度如果是mxx,回文中心是id的话,在扩展串中(id-mxx+1,id+mxx-1)的这段中去除标 ...