javascript 로 로딩바 만들어 보기
<!DOCTYPE html> <html> <style> #myProgress { position: relative; width: 100%; height: 30px; background-color: #ddd; } #myBar { position: absolute; width: 1%; height: 100%; background-color: #4CAF50; } </style> <body> <h1>프로그래스바</h1> <div id="myProgress"> <div id="myBar"></div> </div> <br> <button onclick="move()">은주맴 누르삼</button> <script> function move() { var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 1000); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; elem.innerText = width + '%'; } } } </script> </body> </html>
비동기 화면에서 뒤로가기 back 버튼 마우스를 클릭시 window.history.pushState 사용하기 (0) | 2018.04.09 |
---|---|
엑셀을 html 의 table 테이블 html 태그 제공 (https://codebeautify.org) (0) | 2017.11.06 |
javascript 로 로딩바 만들어 보기 (0) | 2017.07.07 |
html 5 환경에서 파일 사이즈 file size 알아내기 (0) | 2017.07.04 |
구글 캘린더(구글 달력) 에 일정 추가 하는 방법 (0) | 2017.06.07 |
res://ieframe.dll/forbidframing.htm 경로 왜 발생할까? (0) | 2015.08.21 |
본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.