[JavaScript] 특정 div의 내용을 일정 시간마다 새로고침하기

페이지 정보

yadolee 루루아빠 15,411 1 2016.03.20 06:24:31

평점

  • 평점 : 0점 (0명 참여)

본문


<div class="sample">
내용
</div>
위와 같은 소스가 있다면 다음과 같이 추가한다

<div class="example">
    <div id="sample">
    내용
    </div>
</div>
<script>
function autoRefresh_sample_div()
{
var currentLocation = window.location;
$("#sample").fadeOut('slow').load(currentLocation + ' #sample').fadeIn("slow");
}
setInterval('autoRefresh_sample_div()', 30000); //30초 후 새로고침
</script>
상기 소스의 div id값 sample을 사용자 임의로 정한 값으로 변경하면 된다.
<div  id="sample" class="example">과 같이 하지 않고 따로 <div>로 감싼 이유는 원 <div class="example">내용</div>가 의도치 않은 모양으로 나타날 수 있기 때문이다.
또한 .fadeOut('slow')와 .fadeIn("slow")는 굳이 필요한 스크립트는 아니나 효과를 주기 위함이고 slow 대신 fast, 혹은 숫치 값을 입력해도 된다.


 
추천인 1
  • 비회원
yadolee
6
루루아빠 - 회원등급 : 최고관리자 - 포인트 : 1,332,923
레벨 100
경험치 1,488,670

Progress Bar 12.24%

- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑 루루아빠랍니다~~

댓글

첫 번째 댓글을 남겨 주세요

Total 7621526 페이지

제목 글쓴이 날짜 조회 추천
기타  🏆 IE11에서 JWplayer7.x 가 로딩되지 않는 Setup timeout error 해결책 루루아빠 2016.06.01 4,945 0
CSS  🏆 webkit-transform 스타일이 마우스 오버시 보이는 flickering 증상 해결하기 루루아빠 2016.05.26 3,131 0
에디터  댓글+1🏆 CKeditor4.x 에디터 툴바 고정하기 루루아빠 2016.05.24 3,957 0
기타  댓글+1🏆 Jwplayer 7.X 타이머 팁의 플레이 타임이 세로로 나타날 때 해결책 루루아빠 2016.05.21 2,923 0
jQuery  댓글+1🏆 게시글 본문 내에 첨부된 이미지가 엑박으로 뜨는 경우 특정 이미지로 대체하기 루루아빠 2016.05.21 3,533 0
에디터  🏆 CKeditor4.x 이미지 첨부시 에디터에 맞게 반응형으로 만들기 루루아빠 2016.05.21 4,551 0
그누•영카트  🏆 영카트 5.1.18 패치 루루아빠 2016.05.17 2,867 0
그누•영카트  🏆 그누보드 5.1.18 패치 루루아빠 2016.05.17 2,672 0
그누•영카트  🏆 영카트 5.1.17 패치 루루아빠 2016.05.17 3,710 0
그누•영카트  🏆 그누보드 5.1.17 패치 루루아빠 2016.05.17 3,155 0
이윰  🏆 이윰레벨을 사용치 않고 그누레벨만 사용하기 루루아빠 2016.05.17 2,987 0
이윰  🏆 모달(modal) 슬라이드 다운 슬라이드 업 효과 없애기 루루아빠 2016.05.13 3,766 0
이윰  🏆 📸 여분필드를 활용한 간단한 게시판 입력 서식 만들기 루루아빠 2016.05.13 3,556 0
이윰  🏆 게시글 본문에 태그가 포함된 경우 검색시 그대로 노출되는 문제 해결 루루아빠 2016.05.13 2,618 0
이윰  댓글+1🏆 SELF-HOSTED로 Jwplayer7.x 사용시 외부 링크(jwpcdn.com)에서 스킨 가져오는 문제 루루아빠 2016.05.11 4,220 0
이윰  🏆 본문 내용 추출시 특정 태그 제거하기 루루아빠 2016.05.09 3,065 0
JavaScript  🏆 모달창(Modal Window) backdrop(모달창 바깥 부분) 클릭시 모달창 닫지 않기 루루아빠 2016.05.06 3,613 0
그누•영카트  🏆 영카트 5.1.16 패치 루루아빠 2016.04.23 2,683 0
그누•영카트  🏆 그누보드 5.1.16 패치 루루아빠 2016.04.23 2,761 0
이윰  🏆 Eyoom Builder 1.2.4 패치 루루아빠 2016.04.23 2,798 0
이윰  🏆 Eyoom Builder 1.2.3 패치 루루아빠 2016.03.29 3,291 0
이윰  🏆 글 작성시 익명으로만 글 작성하게 하기 루루아빠 2016.03.29 2,987 0
그누•영카트  🏆 영카트 5.1.15 패치 루루아빠 2016.03.21 2,917 0
그누•영카트  🏆 그누보드 5.1.15 패치 루루아빠 2016.03.21 3,487 0
JavaScript  🏆 🚩 특정 div의 내용을 일정 시간마다 새로고침하기 루루아빠 2016.03.20 15,412 1
jQuery  🏆 Theia Sticky Sidebar 사용시 모달(modal)이 사이드바 아래로 내려가는 문제 해결하기 루루아빠 2016.03.16 4,026 0
CSS  🏆 div 클래스에 :last-child css 스타일 적용하기 루루아빠 2016.03.15 2,642 0
그누•영카트  🏆 영카트 5.1.14 패치 루루아빠 2016.03.08 2,730 0
그누•영카트  🏆 그누보드 5.1.14 패치 루루아빠 2016.03.08 2,788 0
이윰  댓글+1🏆 무한스크롤을 사용하지 않는 일반 게시판을 타 경로에서 모달창으로 불러올 때 배경이미지가 본문에 나타나는 문제 해결 루루아빠 2016.03.05 3,863 0