<!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. 通过阅读《React 进阶之路》之学习笔记

    第一章: React 通过引入虚拟DOM.状态.单向数据流等设计理念,形成以组件为核心,用组件搭建UI的开发模式.

  2. Android 自定义控件——图片剪裁

    如图: 思路:在一个自定义View上绘制一张图片(参照前面提到的另一篇文章),在该自定义View上绘制一个自定义的FloatDrawable,也就是图中的浮层.绘制图片和FloatDrawable的交 ...

  3. [ Tools ] [ MobaXterm ] [ SSH ] [ Linux ] 中文顯示解決

    預設是無法顯示中文的,需要修改連線的 Terminal Setting

  4. PHP中的字符串类型

    PHP支持两种类型的字符串,这些字符串用引号说明. 1.如果希望赋值一个字面意义的字符串,精确保存这个字符串的内容,应该用单引号标注,例如: $info='You are my $sunshine'; ...

  5. MySQL 5.7 安装过程中遇到的坑

    在安装的过程中遇到了几个坑,特地记录下来.启动的时候会有有个错误: 大意为mysql退出且更新不了pid文件. 查看error.log,如图: 大意为ibdtata1文件不够,初始化的时候页数太大.初 ...

  6. day27-1 numpy模块

    目录 numpy array 一维数组 二维数组(用的最多) np.array和list的区别 获取多维数组的行和列 多维数组的索引 高级功能 多维数组的元素替换 多维数组的合并 通过函数方法创建多维 ...

  7. jq DataTable

    DataTables(http://datatables.club/index.html)应该是我到目前为止见过的,功能最强大的表格解决方案(当然,不计算其它整套框架中的table控件在内). 先把它 ...

  8. TensorFlow技术解析与实战学习笔记（13）------Mnist识别和卷积神经网络AlexNet

    一.AlexNet:共8层:5个卷积层(卷积+池化).3个全连接层,输出到softmax层,产生分类. 论文中lrn层推荐的参数:depth_radius = 4,bias = 1.0 , alpha ...

  9. JAVA中各个包的主要作用

    00:48:0800:48:1022013013-06-282013-06-2800:48:182013-06-2800:48:20  java.util是JAVA的utility工具包 java.l ...

  10. [ZOJ]3541 Last Puzzle (区间DP)

    ZOJ 3541 题目大意:有n个按钮,第i个按钮在按下ti 时间后回自动弹起,每个开关的位置是di,问什么策略按开关可以使所有的开关同时处于按下状态 Description There is one ...