<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-Type" charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">

</head>

<body>

<div class="container">

    <div class="progress">

      <div id="p1" class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="min-width: 2%;">

        0%

      </div>

    </div>

    <button id="i1" class="btn btn-success">起飞！</button>

</div>

<script src="jquery-3.3.1.js"></script>

<script src="bootstrap-3.3.7/js/bootstrap.js"></script>

<script>

    var x=0;

    var t;

    function setWidth(){

        if (x<100){

            x += 1;

            $("#p1").css("width", x+"%").text(x+"%");

        } else {

            // 进度条走完要停止定时器

            clearInterval(t);

        }

    }

    $("#i1").click(function () {

        t = setInterval(setWidth, 100)

    });

</script>

</body>

</html>

　　

jQuery进度条设置的更多相关文章

  1. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  2. JQuery进度条

    需要实现效果如下图. 页面代码<div class='progress_bar' data-color='#f66' data-per='"+list[i].percent+" ...

  3. Xamarin XAML语言教程通过ProgressTo方法对进度条设置

    Xamarin XAML语言教程通过ProgressTo方法对进度条设置 在ProgressBar中定义了一个ProgressTo方法,此方法也可以用来对进度条当前的进行进行设置,ProgressTo ...

  4. 简单的jquery进度条插件LineProgressbar.js，myProgress.js

    参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...

  5. 为ProgressBar进度条设置颜色1

    可以通过xml文件来设置,方法如下: 1:先在布局文件中的ProgressBar加入下面属性: android:progressDrawable="@drawable/progress_ba ...

  6. Qt的进度条设置

    progress bar 颜色设置 QProgressBar {   border: 2px solid grey;   border-radius: 5px;   background-color: ...

  7. Jquery 进度条集锦

    http://sc.chinaz.com/tag_jiaoben/JinDuTiao.html?qq-pf-to=pcqq.group

  8. CentOS6.x和CentOS7.X启动系统不显示进度条设置方法

    [root@ok Desktop]# vi /boot/grub/grub.conf # grub.conf generated by anaconda # # Note that you do no ...

  9. ProgressBar 进度条设置百分比显示

    rawable/progressbar <layer-list xmlns:android="http://schemas.android.com/apk/res/android&qu ...

随机推荐

  1. 初学 Ajax（涉及 php)

    一直知道 ajax 但是尚未真正了解, 这次看了慕课网的<Ajax全接触>,算是有所收获,入了个门. 需要用到php,因为 Ajax也是向服务器请求(不知道这么解释对不对), 所以还需要配 ...

  2. Java单例模式 多种实现方式

    一:通过静态私有成员实现单例模式 (1):私有化构造函数 (2):new静态实例属性对象,加锁. 单例类: package SinglePag; /* * 构造函数私有化,结合锁+静态的概念 实现单例 ...

  3. （转）shiro权限框架详解06-shiro与web项目整合(下)

    http://blog.csdn.net/facekbook/article/details/54962975 shiro和web项目整合,实现类似真实项目的应用 web项目中认证 web项目中授权 ...

  4. js 或运算

    表达式a && 表达式b : 计算表达式a(也可以是函数)的运算结果, 如果为 True, 执行表达式b(或函数),并返回b的结果: 如果为 False,返回a的结果: 表达式a || ...

  5. DB2高可用hadr搭建参数配置

    主机上执行db2 UPDATE DB CFG FOR XMHIS USING HADR_LOCAL_HOST 192.168.1.2db2 UPDATE DB CFG FOR XMHIS USING ...

  6. Shoot the Bullet ZOJ - 3229有上下界网络流

    Code: #include<cstdio> #include<algorithm> #include<vector> #include<queue> ...

  7. sklearn学习汇总

    该博主总结的很好,https://www.cnblogs.com/hellcat/p/7531789.html 1.kaggle给出的导图 2.转化成树图: 3.sklearn工具导图

  8. python面向对象的三大特性之一多态

    多态 多态的特性是调用不同的子类将会产生不同的行为,而无需明确知道这个子类实际上是什么 说白了就是,不同的对象调用相同的方法,产生不同的行为 例如:s1是字符串类型,w1是列表,两个完全不同的对象,他 ...

  9. jquery bind 传参数

    方法一. ? 1 2 3 4 function GetCode(event) { alert(event.data.foo); } ? 1 2 3 4 $(document).ready(functi ...

  10. --without-v4l ，make clean, 重新make即可。

    --without-v4l ,make clean, 重新make 2011-02-27 17:38 Error: X11 support required for GUI compilation