jQuery案例十二进度条
上一节
下一节
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17.12jQuery案例十二进度条</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var timer = null;
var num = 0;
var speed = 50;
var w = $('#outdiv').width();
function pro(){
num++;
if(num==100) {clearInterval(timer);}
var pw = num/100*w;
$('#indiv').width(pw);
$('#pre').html(num+'%');
}
timer = setInterval(pro,speed);
});
</script>
<style>
#outdiv{
width:300px;
height:30px;
border:2px solid #999;
}
#indiv{
height:30px;
width:0px;
background-color:#CCC;
}
</style>
</head>
<body>
<div id="outdiv">
<div id="indiv"></div>
</div>
<span id="pre">0%</span>
</body>
</html>
