<!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. （转）webpack从零开始第6课:在Vue开发中使用webpack

    vue官方已经写好一个vue-webpack模板vue_cli,原本自己写一个,发现官方写得已经够好了,自己写显得有点多余,但为了让大家熟悉webpack,决定还是一步一步从0开始写,但源文件就直接拷 ...

  2. Laravel5 开启Debug

    Laravel默认没有开启Debug,打开需要两步: .env文件中设置APP_DEBUG=true: 把Laravel服务重启一下(摸索出来的). 这只是开启了基本的调试模式,如果需要看更详细的调试 ...

  3. RedHat/CentOS 大文件拆分及合并与md5验证

    [root@tdh55 mnt]# cd /opt/[root@tdh55 opt]# ll -h-rw-r--r--. 1 root root 7.5G May 12 11:19 TDH-Image ...

  4. 开启RxSwift之旅——开篇

    开启RxSwift之旅——开篇 RxSwift 是 ReactiveX 在 Swift 下的实现.ReactiveX 是一个通过使用可观察序列来组合异步和基于事件的程序的库. 很多地方通常把 Reac ...

  5. 这里介绍两种将矩阵写入TXT文件的方法。

    方法1 fid = fopen('data.txt','wt'); % data.txt为写入文件名 matrix = M; % M为要存储的矩阵 [m,n]=size(matrix); for i= ...

  6. vc++如何创建窗口

    创建一个mfc工程,AppWizard可以用来增加和选择一些特性 可以发现一共有五个类,每一个类都有一个基类,都是mfc基础类库中的类 例如将一个类拷贝一下,将CFrameWnd到msdn中查找一下, ...

  7. wamp的安装配置

    WAMP是指在Windows服务器上使用Apache.MySQL和PHP的集成安装环境,可以快速安装配置Web服务器. 一.下载安装包 进入官网下载:http://www.wampserver.com ...

  8. linux部署.net core api并且实现上传图片

    为了体验.net在linux上运行,所以使用HttpClient东借西抄做了一个简单的api上传功能. 第一步,简单的上传功能: public class UploadHelper { private ...

  9. HDU 5307 He is Flying (生成函数+FFT)

    题目传送门 题目大意:给你一个长度为$n$的自然数序列$a$,定义一段区间的权值为这一段区间里所有数的和,分别输出权值为$[0,\sum a_{i}]$的区间的长度之和 想到了生成函数的话,这道题并不 ...

  10. js生产随机数

    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; var string_le ...