<!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. YCbCr to RGB and RGB toYCbCr

    RGB => YCbCr: Y = 0.299R + 0.587G + 0.114BCb = -0.1726R - 0.3388G + 0.5114B + 128Cr = 0.5114R - 0 ...

  2. 洛谷P4413 [COCI2006-2007#2] R2(可持久化平衡树维护NTT)

    题意翻译 设S=(R1+R2)/2,给定R1与S (-1000<=R1,S<=1000)(−1000<=R1,S<=1000) ,求R2. 感谢@Xeonacid 提供的翻译 ...

  3. 配置notepad++编程环境

    1. 到 https://sourceforge.net/projects/mingw-w64/files/ 下载MinGW64,解压并移动到C盘根目录 2. 将 C:\MinGW64\bin 加入系 ...

  4. PHP 判断一个字符是否在字符串中

    strpos() - 查找字符串 在另一字符串中 第一次出现的位置(区分大小写) stripos() - 查找字符串 在另一字符串中 第一次出现的位置(不区分大小写) strrpos() - 查找字符 ...

  5. Jenkins 部署 PHP 应用

    安装 Jenkins 方式一:docker方式安装 拉取jenkins官方镜像,按照镜像文档启动镜像就可以了 方式二:手动安装 以下所有操作都使用 root 用户进行操作. 在各项目官网,下载 Jav ...

  6. python与图灵机器人交互(WXPY版本)

    开发者账号:wujunfeng , 开发者key:官网申请  #!/usr/bin/env python#-*- coding:utf-8 -*- @Author : wujf @Time:2018/ ...

  7. a标记地址的几种用法

    1.<a href="tel://号码"></a> 手机使用能自动拨打电话 //可以省略 2.<a href="mailto://邮箱&qu ...

  8. [JoyOI] 1035 棋盘覆盖 （二分图匹配）

    题目描述 给出一张nn(n<=100)的国际象棋棋盘,其中被删除了一些点,问可以使用多少12的多米诺骨牌进行掩盖. 输入格式 第一行为n,m(表示有m个删除的格子) 第二行到m+1行为x,y,分 ...

  9. Linux（CentOS 6.4）系统中安装mplayer

    整了一个上午终于把mplayer安装上了,我的系统是centos 6.4,真是不容易啊! 一.准备工作 需要的安装包及下载地址:1.mplayer源代码包(MPlayer-1.0rc4.tar.bz2 ...

  10. Java工具类使用注意事项

    (以下摘自阿里巴巴Java开发手册) 1. [强制]获取单例对象需要保证线程安全,其中的方法也要保证线程安全. 说明:资源驱动类.工具类.单例工厂类都需要注意. 5. [强制]SimpleDateFo ...