JavaScript Progress Bar > 웹개발팁


웹개발팁

모아보자 [SCRIPT] JavaScript Progress Bar 웹개발팁

[SCRIPT] JavaScript Progress Bar

본문

 
<style> 
#myProgress {width:100%;background-color:#ddd;} 
#myBar {width:10%;height:30px;background-color:#4CAF50;text-align:center;line-height: 30px;color:white;} 
</style> 
 
<div id="myProgress"> 
  <div id="myBar">10%</div> 
</div> 
<br> 
<button onclick="move()">Click Me</button>  
 
<script> 
var i = 0; 
function move() { 
  if (i == 0) { 
    i = 1; 
    var elem = document.getElementById("myBar"); 
    var width = 10; 
    var id = setInterval(frame, 10); 
    function frame() { 
      if (width >= 100) { 
        clearInterval(id); 
        i = 0; 
	  // alert('완료되었습니다.'); // 주석 풀면 100%가되면 알트창 뜸 
      } else { 
        width++; 
        elem.style.width = width + "%"; 
        elem.innerHTML = width  + "%"; 
      } 
    } 
  } 
} 
// move(); // 주석 풀면 자동 실행 
</script> 


모바일버전 RSS SITEMAP