样式：

<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. 内网渗透之跨边界传输 - 反弹shell

    大年初一,当然是更一篇重磅文章啦 反弹shell /bin目录下带sh的都是shell nc 1.正向连接,目标机监听自身端口,攻击机主动建立连接 目标机:nc -lvvp 端口 -e /bin/ba ...

  2. 内网渗透之跨边界传输 - LCX转发

    跨边界转发 端口转发 lcx 流程 目标机 ./lcx -slave 跳板机ip 监听的端口 127.0.0.1 要转发的端口 跳板机(公网) ./lcx -listen 监听的端口 转发给攻击机访问 ...

  3. selenium+options配置文件

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

  4. Tomcat起不来的原因

    1.没有配java_home Tomcat是Java编写的,所以必须要java_home 2.端口被占用 怎么查看端口被占用呢?——windows 小工具:Fport.exe 3.Catalina_h ...

  5. drf呼啦圈

    呼啦圈 1.1 表结构设计 不会经常变化的值放在内存:choices形式,避免跨表性能低. 分表:如果表中列太多/大量内容可以选择水平分表 表自关联 from django.db import mod ...

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

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

  7. Fluent算例精选｜03利用VOF和蒸发-冷凝模型

    通过学习本算例您将获得? 1.学会基本的VOF模型设置流程 2.学会利用蒸发-冷凝模型来模拟传热沸腾 目录 1摘要4 2传热沸腾模型介绍4 3前处理4 4求解设置5 4.1启动Fluent5 4.2网 ...

  8. Ruby中的Hash(哈希),你可以理解为字典

    原文链接 以下代码在Ruby 2.5.1中编译通过 定义 myHash = Hash.new myHash1 = Hash["key1" => 100, "key2 ...

  9. 循序渐进地聊一聊 box-shaow

    影子在现实生活中可以是一个物体的副本,在 CSS 中也是这样的,相当于复制了那个元素(并不是真正的元素,对页面布局没有任何影响),可以从下面的代码中看出来. .container { width: 1 ...

  10. Journal of Proteome Research | iHPDM: In Silico Human Proteome Digestion Map with Proteolytic Peptide Analysis and Graphical Visualizations（iHPDM: 人类蛋白质组理论酶解图谱的水解肽段分析和可视化展示）| (解读人：邓亚美)

    文献名:iHPDM: In Silico Human Proteome Digestion Map with Proteolytic Peptide Analysis and Graphical Vi ...