easyUI之progressbar进度条
2024-09-05 07:07:31
<!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>
最新文章
- nodejs httpserver
- <;input type=";file"; />;浏览时只显示指定文件类型
- ubuntu 屏幕截图
- Codeforces Round #359 (Div. 2) C. Robbers&#39; watch (暴力DFS)
- 深入浅出JMS(二)——JMS的组成
- 程序员带你十天快速入门Python,玩转电脑软件开发(三)
- PHP 调用微信JS-SDK 开发详解 [网摘]
- oracle导入时提示IMP-00010:不是有效的导出文件,头部验证失败
- hadoop入门级总结二:Map/Reduce
- flag.xls
- CentOS 5 常见的configure error的解决方法
- 简单易懂的程序语言入门小册子(7):基于文本替换的解释器,加入continuation,重构解释器
- Maven添加Web.xml的方法
- Android 开发中 SQLite 数据库的使用
- Gui图形化界面
- 松散的css
- ASP.NET MVC下使用AngularJs语言(六):获取下拉列表的value和Text
- Lua获取当前时间
- css获取样式
- 修改mui accordion(折叠面板)默认展开收缩行为