진행률 표시줄_javascript 기술을 구현하는 js 메서드
- WBOY원래의
- 2016-05-16 16:14:171386검색
이 글의 예시에서는 js에서 진행률 표시줄을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.
1.setTimeout 및clearTimeout
<html>
<head>
<title>进度条</title>
<style type="text/css">
.container{
width:450px;
border:1px solid #6C9C2C;
height:25px;
}
#bar{
background:#95CA0D;
float:left;
height:100%;
text-align:center;
line-height:150%;
}
</style>
<script type="text/javascript">
function run(){
var bar = document.getElementById("bar");
var total = document.getElementById("total");
bar.style.width=parseInt(bar.style.width) + 1 + "%";
total.innerHTML = bar.style.width;
if(bar.style.width == "100%"){
window.clearTimeout(timeout);
return;
}
var timeout=window.setTimeout("run()",100);
}
window.onload = function(){
run();
}
</script>
</head>
<body>
<div class="container">
<div id="bar" style="width:0%;"></div>
</div>
<span id="total"></span>
</body>
</html>
렌더링:
2.setInterval 및clearInterval
<html>
<head>
<title>进度条</title>
<style type="text/css">
.processcontainer{
width:450px;
border:1px solid #6C9C2C;
height:25px;
}
#processbar{
background:#95CA0D;
float:left;
height:100%;
text-align:center;
line-height:150%;
}
</style>
<script type="text/javascript">
function setProcess(){
var processbar = document.getElementById("processbar");
processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
processbar.innerHTML = processbar.style.width;
if(processbar.style.width == "100%"){
window.clearInterval(bartimer);
}
}
var bartimer = window.setInterval(function(){setProcess();},100);
window.onload = function(){
bartimer;
}
</script>
</head>
<body>
<div class="processcontainer">
<div id="processbar" style="width:0%;"></div>
</div>
</body>
</html>
렌더링:
3.setTimeout과 setInterval의 차이점
setTimeout()은 코드를 한 번만 실행합니다. 여러 번 호출하려면 setInterval()을 사용하세요. setInterval() 메서드는 clearInterval()이 호출되거나 창이 닫히거나 코드 자체에서 setTimeout()을 다시 호출할 때까지 함수를 계속 호출합니다.
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.