<!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. 【uoj#94】【集训队互测2015】胡策的统计（集合幂级数）

    题目传送门:http://uoj.ac/problem/94 这是一道集合幂级数的入门题目.我们先考虑求出每个点集的连通生成子图个数,记为$g_S$,再记$h_S$为点集$S$的生成子图个数,容易发现 ...

  2. （备忘）Python字符串、元组、列表、字典互相转换的方法

    #1.字典 dict = {'name': 'Zara', 'age': 7, 'class': 'First'} #字典转为字符串,返回:<type 'str'> {'age': 7, ...

  3. rdb和aof二种持久化方式对比(Redis)

    我们已经知道对于一个企业级的redis架构来说,持久化是不可减少的 企业级redis集群架构:海量数据.高并发.高可用 持久化主要是做灾难恢复,数据恢复,也可以归类到高可用的一个环节里面去 比如你re ...

  4. sql server 备份

    USE WAP_WORKSHEET; GO BACKUP DATABASE WAP_WORKSHEET TO DISK = 'E:\SQL\Data\backup\WAP_WORKSHEET.Bak' ...

  5. JAVA8初探-让方法参数具备行为能力并引入Lambda表达式

    关于JAVA8学习的意义先来贴一下某网站上的对它的简单介绍:“Java 8可谓Java语言历史上变化最大的一个版本,其承诺要调整Java编程向着函数式风格迈进,这有助于编写出更为简洁.表达力更强,并且 ...

  6. linux内核无锁缓冲队列kfifo原理

    Linux kernel里面从来就不缺少简洁,优雅和高效的代码 比如,通过限定写入的数据不能溢出和内存屏障实现在单线程写单线程读的情况下不使用锁.因为锁是使用在共享资源可能存在冲突的情况下.还用设置b ...

  7. HTML5——2 HTML5视频

    在以往我们还是使用flash来进行播放视频,但是它有先天的缺陷,比如,很多的浏览器并不会直接去支持flash插件,需要你自己去安装,而且版本也很难去统一,也有浏览器先天集成了这个插件,比如Chrome ...

  8. 数字证书注册审批机构（RA）

    1.证书注册审批机构 RA(Registration Authority),数字证书注册审批机构.RA系统是CA的证书发放.管理的延伸.它负责证书申请者的信息录入.审核以及证书发放等工作:同时,对发放 ...

  9. jquery.table2excel，将HTML的table标签数据导出成excel

    <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content=&quo ...

  10. 多种view视图和序列化--django2

    models.py from django.db import models # Create your models here. class Idc(models.Model): name = mo ...