您的位置：首页 > Web前端 > JQuery

jquery进度条

2015-11-06 15:53 609 查看

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery 进度条</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{margin: 0;padding: 0;}
.progs {
width: 1000px;
margin: 0 auto;
text-align: center;
margin-top: 200px;
}
#progress {
width: 800px;
height: 15px;
position: relative;
border: 1px solid #336688;
margin: 0 auto;
}
#curr {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background: orange;
}
.showper {
height: 25px
}
</style>
</head>
<body>

<div class="progs">
<p class="showper">0%</p>
<div id="progress"><div id="curr"></div></div>
<input type="button" value="开始">
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
<script type="text/javascript">
var i=0;
$(function(){
$("input[type='button']").one("click",calcper);
});
function calcper(event){
var aa=setInterval(function(){
var curwidth=$("#curr").width();
if(i>=100){
clearInterval(aa);
event.target.value="完成";
}
$("#curr").width(i*8);
$(".showper").html(i+"%");
i++;
},10);
}

</script>
</body>
</html></span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航