<!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. win10下mysql安装过程中遇到的各种坑

    前几天重装系统,又要下回来mysql,但没想到还是遇到了许多麻烦,翻了十多篇博文才搞定,写个总结出来方便以后不要重复踩坑,也给大家参考参考. 1.下载与安装 这个没什么好说的,下载地址网上一大堆,安装 ...

  2. 决策实验（2）分水岭&哄骗实验

    转载请注明http://www.cnblogs.com/igoslly/p/6824544.html 史密斯实验II PART I 分水岭实验 两种选项 A 50%没钱,50% 45元 B 获取固定数 ...

  3. ubuntu下svn up 出现 Can't convert string from 'UTF-8' to native encoding

    root@ubuntu:/data/www# svn up svn: warning: cannot set LC_CTYPE locale svn: warning: environment var ...

  4. Verilog之$sreadmemb

    1 Memories  Memories file format is shown below, the address is specified as @ <address> in he ...

  5. Java数组的运用

    Java数组 应用1: 大乐透彩票模拟器: 规则: 前区01-35中随机生成5个号码 后区01-12中随机生成2个号码 模拟操作,系统自动生成号码组合,并且按从小到大的顺序输出结果 同时要求可以选择生 ...

  6. mwArray与C++接口

    1.Matlab调用C++:http://blog.csdn.net/zouxy09/article/details/20553007 摘录下效果图: 2.mwArray类操作:http://blog ...

  7. OpenCV中GPU模块使用

    CUDA IT168的文章系列: Cuda的初始化:http://tech.it168.com/a2011/0715/1218/000001218458.shtml OpenCV: OpenCV中GP ...

  8. 实现数组类（C++ 拷贝构造函数、拷贝函数）要判断赋值左右对象不相等，坑惨了

    #include <iostream> using namespace std; class ArrayIndexOutOfBoundsException{ // 异常类 public: ...

  9. MySQL数据库具体一些操作

    创建数据库:CREATE DATABASE 数据库名;删除数据库:drop database <数据库名>;选择使用(需要操作的数据库):use 数据库名称;mysql数据库数据类型:类型 ...

  10. 一款 App 开发到上架

    随着互联网时代的发展,越来越多的 App 诞生啦.App 是手机软件的简称,手机主流的有 iOS.Andriod. 开发一个 App 需要哪些步骤呢?下面我和大家分享一下. 一.APP 的 idea( ...