<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>ProgressBar（进度条）</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>

    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>

    <script type="text/javascript" src="../js/jquery.min.js"></script>

    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>

  </head>

  <body>

    <div id="p" style="width:400px;"></div>

    <script type="text/javascript">

        $("#p").progressbar({

            width : 1300,

            height : 100,

            value : 0

        });

    </script>    

    <input id="startID" type="button" value="动起来" style="width:111px;height:111px;font-size:33px"/>

    <script type="text/javascript">

        //获取1到9之间的随机数，包含1和9

        function getNum(){

            return Math.floor(Math.random()*9)+1;

        }

    </script>

    <script type="text/javascript">

        var timeID = null;

        //函数

        function update(){

            //获取随机值,例如：3

            var num = getNum();

            //获取进度条当前值，例如：99

            var value = $("#p").progressbar("getValue");

            //判断

            if(value + num > 100){

                //强行设置进度条的当前值为100

                $("#p").progressbar("setValue",100);

                //停止定时器

                window.clearInterval(timeID);

                //按钮正效

                $("#startID").removeAttr("disabled");

            }else{

                //设置进度条的当前值为num+value的和

                $("#p").progressbar("setValue",(value+num));

            }

        }

        //定拉按钮，同时提供单击事件

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

            //每隔300毫秒执行update方法

            timeID = window.setInterval("update()",300);

            //按钮失效

            $(this).attr("disabled","disabled");

        });

    </script>

  </body>

</html>

easyUI之progressbar进度条的更多相关文章

  1. 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  2. EasyUI系列学习(八)-ProgressBar(进度条)

    一.创建组件 1.class加载 <div class="easyui-progressbar"></div> 2.js加载 <div id=&quo ...

  3. progressbar进度条组件

    Progressbar 进度条组件 通过$.fn.progressbar.fn.defaults重写默认的defaults进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更 ...

  4. Android学习笔记- ProgressBar(进度条)

    本节引言: 本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用 ...

  5. ProgressBar(进度条)、SeekBar(拖动条)与星级评分条(RatingBar)

    1.ProgressBar(进度条) (1)介绍 (2)常用属性 (3)xml代码 <ProgressBar android:id="@+id/progressBar2" s ...

  6. Qt Quick 常用元素：ComboBox(下拉列表) 与 ProgressBar(进度条)

    一.ComboBox ComboBox,即下拉列表框,由一个列表框和一个标签控件(或编辑控件)组成.ComboBox 的下拉列表是使用 Menu 实现的,列表内的每个条目对应一个 Menultem. ...

  7. easyui的DataGrid的单元格添加ProgressBar进度条

    网上的搜到的好多不能用,官方easy-ui使用进度条 <div id="p" class="easyui-progressbar" ></di ...

  8. EasyUI Progressbar 进度条

    通过 $.fn.progressbar.defaults 重写默认的 defaults. 进度条(progressbar)提供了一种显示长时间操作进度的反馈.进度可被更新以便让用户知道当前正在执行的操 ...

  9. android ProgressBar 进度条的进度两端是圆角的方法

    转自 http://www.jianshu.com/p/6e7ea842d5ce 另外工作原理可以参考http://blog.csdn.net/lan603168/article/details/44 ...

随机推荐

  1. CI/CD持续集成小结

    一.概念 什么是devops,基于Gitlab从零开始搭建自己的持续集成流水线(Pipeline) https://blog.csdn.net/chengzi_comm/article/details ...

  2. 02_ Flume的安装部署及其简单使用

    一.Flume的安装部署: Flume的安装非常简单,只需要解压即可,当然,前提是已有hadoop环境 安装包的下载地址为:http://www-us.apache.org/dist/flume/1. ...

  3. (转)为什么收到三个重复的ACK意味着发生拥塞?

    三次重复的ACK,可能是丢包引起的,丢包可能是网络拥塞造成的,也可能是信号失真造成的. 三次重复的ACK,也有可能是乱序引起的,而乱序和网络拥塞没有直接关系. 如果就写这两行,感觉什么都没写,接下来的 ...

  4. JSON 语法 数据格式

    我们先来看下w3cschool对json的定义: JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XM ...

  5. 【WEB】jQuery 判断复选框是否选中

    1.背景 在 jQuery 1.6 版本之前,判断方式 <input type='checkbox' id='test'/> <script> var isChecked = ...

  6. swoole 协程channel乱测

    channel和数组差不多,可以被用作队列,属性capacity是设置容量,isEmpty() isFull() 用来判断队列是空还是满,push()加入队列 pop()弹出队列 interface ...

  7. 粗暴，干就完了----徐晓冬似的C语言自学笔记-----实现一个链表结构

    #include <stdio.h> #include <stdlib.h> #define N 5 /*N 假定数组长度为5*/ typedef struct snode { ...

  8. Codeforces Round #586 (Div. 1 + Div. 2) B. Multiplication Table

    链接: https://codeforces.com/contest/1220/problem/B 题意: Sasha grew up and went to first grade. To cele ...

  9. kafka什么时候会丢消息（转）

    因为在具体开发中某些环节考虑使用kafka却担心有消息丢失的风险,本周结合项目对kafka的消息可靠性做了一下调研和总结: 首先明确一下丢消息的定义.kafka集群中的部分或全部broker挂了,导致 ...

  10. spring注解@Import和@ImportResource

    @Import只负责引入javaCOnfig形式定义的Ioc容器配置,等同于<import resource="xxx.xml"/>将一个配置文件导入另一个 @Conf ...