easyUI之progressbar进度条 

<!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>

 

posted on 2018-12-04 10:25  LoaderMan  阅读(311)  评论(0)  编辑  收藏  举报

导航