<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/lib/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function () {
var yun;
//点击开始按钮
$("#start").click(function () {
//循环函数,进度条移动
//yun是返回值,以此来确定后面停止的是哪个循环函数
//setInterval("要循环的函数",每次循环的时间(毫秒));
yun=setInterval("stime()", 1000);
})
//点击关闭按钮
$("#stop").click(function () {
clearInterval(yun)
})
});
function stime() {
//获取进度条的value值
var time=$("#stime").val();
//进度条value值+1再赋值给进度条
$("#stime").val(time+1);
}
</script>
</head>
<body>
<div>
<label>进度条</label>
<progress id="stime" value="0" max="2400" style="width: 90%"></progress>
<button id="start" type="button">开始</button>
<button id="stop" type="button">停止</button>
</div>
</body>
</html>