html, css, jquery를 결합하여 간단한 진행률 표시줄 효과 예제 코드 구현-PHP开发-php.cn

html, css, jquery를 결합하여 간단한 진행률 표시줄 효과 예제 코드 구현

高洛峰

풀어 주다： 2016-12-09 11:14:33

원래의

1771명이 탐색했습니다.

더 이상 고민하지 않고 구체적인 코드를 게시하겠습니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery实现进度条</title>
<style type="text/css">
body{
　　padding:30px;
　　margin-left:450px;
　　margin-top:200px;
　　width:350px;
　　border: 1px solid #98AFB7;
}
.progressBar{
　　width:280px;
　　height:20px;
　　border: 1px solid #98AFB7;
　　border-radius:8px;
　　background:#e1dfdf;
}
input{
　　margin-bottom:15px;
}
span{
　　position:relative;
　　top:-20px;
　　left:290px;
}
#bar {
　　width: 0px;
　　height: 20px;
　　border-radius: 7px;
　　background: #5EC4EA;
}
</style>
//引入Jquery文件
<script src="Jquerys/jquery.js"></script>
<script type="text/javascript">
function progressBar() {
　　$("#bar").css("width", "0px");
　　var speed =20;//进度条的速度
　　bar = setInterval(function () {
　　nowWidth = parseInt($("#bar").width());
　　if (nowWidth <= 279) {
　　　　var barWidth = (nowWidth + 1);
　　　　$("#bar").css("width", barWidth + "px");
　　　　var totla = parseInt($(".progressBar").width())
　　　　var ss = barWidth / totla * 100;
　　　　$("#span_s").text(ss);
　　　　var index = $("#span_s").text().indexOf(".");
　　　　if (index != -1) {
　　　　　　var context = $("#span_s").text().substring(0, index);
　　　　　　$("#span_s").text(context);
　　　　}
　　　　else {
　　　　　　$("#span_s").text(ss);
　　　　　　if (parseInt($("#span_s").text()) == 100) {
　　　　　　alert(&#39;完成&#39;);
　　　　　　}
　　　　}
　　} else {
　　　　　　clearInterval(bar);
　　　　}
　　}, speed);
}
</script>
</head>
<body>
　　<input type="button" value="开始" onclick="progressBar()" />
　　<div class="progressBar"><div id="bar"></div></div><span id="span_s">0</span><span>%</span>
</body>
</html>

로그인 후 복사

이 진행률 표시줄은 매우 간단합니다. 우선 HTML에서는 div 안에 중첩된 div일 뿐이고, 특수 효과를 구현하는 것도 매우 간단합니다. 여기서는 익명 함수를 작성하는 것도 매우 간단합니다. 저는 20밀리초에 하나씩 실행합니다. 익명 함수 내부의 코드는 한 번에 한 픽셀을 추가하는 것입니다. 물론 여기에 픽셀을 추가하기 위해 백분율을 사용할 수도 있습니다.