테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

진행바(Progress ba)질문 채택완료

정민황 5년 전 조회 1,511
답변 1
목록

코드가 아래처럼 되어 있을때

"클릭" 을 누르면 100% 되었을때 정해진 주소로 이동하게  하려면

어떻게 수정을 해야 할까요? ^^;

 

</p>

<p><html>

<style>

#myProgress {

  width: 100%;

  background-color: #ddd;

}</p>

<p>#myBar {

  width: 10%;

  height: 30px;

  background-color: #4CAF50;

  text-align: center;

  line-height: 30px;

  color: white;

}

</style>

<body></p>

<p><h1>JavaScript Progress Bar</h1></p>

<p><div id="myProgress">

  <div id="myBar">0%</div>

</div></p>

<p>


<button onclick="move()">클릭</button> </p>

<p><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;

      } else {

        width++;

        elem.style.width = width + "%";

        elem.innerHTML = width  + "%";

      }

    }

  }

}

</script></p>

<p></body>

</html></p>

<p>

#진행바progressba
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
세크티
세크티
5년 전

                
                
<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;
                    // 아래코드 추가하세요
                    location.href='<a href="http://naver.com'" target="_blank" rel="noopener noreferrer">http://naver.com'</a>
                } else {
                    width++;
                    elem.style.width = width + "%";
                    elem.innerHTML = width  + "%";
                }
            }
        }
    }
</script></pre>

<p>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
정민황
5년 전
오... 세크티 님!!!! 감사 드립니다. ^^;

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인