样式：

<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. python 关于函数递归调用自己

    爬取b站博人传 每页短评20个,页数超过1000页, 代码如下 import requests import json import csv def main(start_url): headers ...

  2. nginx升级不改变配置文件

    查看当前版本是:1.10.3 [root@proxy nginx-1.10.3]# /usr/local/nginx/sbin/nginx -Vnginx version: nginx/1.10.3b ...

  3. js 随机产生100个0~1000之间的整数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 测试必知必会系列- Linux常用命令 - cp

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 复制文 ...

  5. Open live Writer 直接发布wps文章，优点是可以带上图片

    官方网站: http://openlivewriter.org/ 博客园的设置里面的 MetaWeblog访问地址

  6. Java 垃圾收集技术

    前言 在计算机科学中,垃圾收回(GC: garbage collection)是内存自动管理的一种方式,它并不是同 Java 语言一起诞生的,实际上,早在 1959 年为了简化 Lisp 语言的手动内 ...

  7. SpringMVC框架——数据绑定

    Spring MVC 数据绑定 使用POJO绑定参数 entity package com.sunjian.entity; /** * @author sunjian * @date 2020/3/1 ...

  8. Web_jQuery

    第1章: jQuery简介 为了简化 JavaScript 的开发,一些 JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数,简化HTML与JavaScript之 ...

  9. .NET的资源并不限于.resx文件

    为了构建一个轻量级的资源管理框架以满足简单的本地化(Localization)的需求,我试图直接对现有的Resource编程模型进行扩展.虽然最终没能满足我们的需求,但是这两天也算对.NET如何进行资 ...

  10. Python异常处理，将异常写入到一个文件

    '''定义一个函数func(urllist) urllist:为URL的列表,例如:['http://xx.com','http://www.xx.com','http://www.xxx.com'. ...