html, css, jquery를 결합하여 간단한 진행률 표시줄 효과 예제 코드 구현
- 高洛峰원래의
- 2016-12-09 11:14:331756검색
더 이상 고민하지 않고 구체적인 코드를 게시하겠습니다.
<!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('完成');
}
}
} 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밀리초에 하나씩 실행합니다. 익명 함수 내부의 코드는 한 번에 한 픽셀을 추가하는 것입니다. 물론 여기에 픽셀을 추가하기 위해 백분율을 사용할 수도 있습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.