样式：

<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. selenium+options配置文件

    from selenium.webdriver.chrome.options import Options from selenium import webdriver chrome_options ...

  2. flask 模型一对多个人理解

    在modle中创建两个模型表 class User(db.Model): id = db.Column(db.Integer,primary_key=True,autoincrement=True) ...

  3. 【GTS-Fail】GtsSecurityHostTestCases#testNoExemptionsForSocketsBetweenCoreAndVendorBan

    [GTS-Fail]GtsSecurityHostTestCases#testNoExemptionsForSocketsBetweenCoreAndVendorBan [问题描述] Gts-7.0- ...

  4. BrowserSync(保存代码后，自动刷新浏览器)

    摘要 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项 ...

  5. 苹果笔记本 安装 ubuntu 默认没有无线网卡 的 解决方案

    sudo apt-get update sudo apt-get install bcmwl-kernel-source

  6. require.context('.', true, /\.router\.js/) webpack 编译的时候读取目录文件

    const routerList = [] function importAll (r) { r.keys().map(value => { r(value).default.map(item ...

  7. java触发full gc的几种情况概述

    前言 近期被问及这个问题,在此记录整理一下. System.gc()方法的调用 此方法的调用是建议JVM进行Full GC,虽然只是建议而非一定,但很多情况下它会触发 Full GC,从而增加Full ...

  8. Java中Comparable和Comparator的区别

    前言 最近复习遇到了这个问题,在此进行一个详细的记录,分享给大家. 两个接口的区别 包区别 Comparable接口是在java.lang下. Comparator接口是在java.util下. 使用 ...

  9. Apache服务的主要目录和配置文件详解

    Apache服务的主要目录和配置文件详解 2014-01-14 19:05:14 标签:httpd配置文件详解 apache配置文件 httpd配置文件 apache文件目录 原创作品,允许转载,转载 ...

  10. 算法修炼之路——【链表】Leetcode24 两两交换链表中的节点

    题目描述 给定一单链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是简单的改变节点内部的值,而是需要实际的进行节点交换. 示例: 输入:head = [1, 2, 3, 4] 输出:hea ...