<!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="400px;"></div> <script type="text/javascript"> $("#p").progressbar({ width : 1300, height : 100, value : 0 }); </script> <input id="startID" type="button" value="动起来" style="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>