样式：

<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. 回想笔记 瞎比比 域名注册 解析绑定ip 下载证书 设置证书 重定向http到https请求

    2019.7.27 回想笔记 拥有腾讯云服务器一台 阿里云注册5元域名,进行备案 完成之后 使用解析 绑定服务器ip地址 ,使用域名可以访问到web服务器而不是通过直接暴露ip地址进行访问 证书购买 ...

  2. c++作业22题

    一.单选题(共22题,100.0分) 1 已知int i=5,下列do-while循环语句的循环次数是 do{ cout<<i - -<<endl; i - -; }while ...

  3. ggplot2（3） 语法突破

    3.1 简介 图形图层语法基于Wilkinson的图形语法,并在其基础上添加了许多新功能,使得图形更有表现力,并能完美地嵌入到R的环境中. 图形图层语法使得图形的重复更新变得简单——每次只更新一个特征 ...

  4. Jenkins+Ant+JMeter集成

    Tomcat是jenkins运行的容器,jenkins实际上是依赖于Tomcat才能启动的.Jenkins可以调度ant的脚本. Ant和maven类似,maven是执行pom文件,ant是执行bui ...

  5. Go语言defer分析

    什么是defer? defer语句是专门在函数结束以后做一些清理工作的.我们先举一个例子来更好的理解,现在有一个函数,它的作用是把一个文件内容拷贝到另一个文件. func CopyFile(dstNa ...

  6. JAVA为什么不能通过构造函数传参来设置数组长度。

     今天我们来说说 JAVA通过构造函数传递的参数来设置数组长度的问题. 问题在于我们没有明确知晓JVM的运行顺序.在new对象的时候,先调用构造函数,但是并没有将执行构造函数的代码,随机之后就初始化了 ...

  7. MySQL笔记（6）-- SQL更新语句日志系统流程

    一.背景 在上一篇[MySQL笔记(5)-- SQL执行流程,MySQL体系结构]中讲述了select查询语句在MySQL体系中的运行流程,从连接器开始,到分析器.优化器.执行器等,最后到达存储引擎. ...

  8. SpringBoot集成Swagger(根据源码深入学习Swagger的用法)

    从源码层面讲解Swagger的用法,快速了解掌握Swagger 简介 Swagger 是一个规范且完整的框架,用于生成.描述.调用和可视化 Restful 风格的 Web 服务. 自动生成html文档 ...

  9. 【原创】基于RBI的性能测试理念，通过jmeter快速定位接口最大并发用户数

    测试工具:jmeter v_5.2 测试对象:某网站的物料获取接口,需登录后操作 测试目的:快速定位该接口最大并发用户数 思路&步骤: 1.模拟一个场景,某天临近下班,主管突然过来让你测下你们 ...

  10. Ubuntu和Windows双系统修复

    一. 感受 新买了电脑从头安装win10和ubuntu双系统,踩了各种坑,终于是成功了. 大致流程是用老毛桃安装了window10系统,装在了固态硬盘上.随后用软碟通将Ubuntu系统写入U盘(先用老 ...