자바스크립트 새로고침 DIV
-
.load()에서window.location.href를 사용하여 JavaScript에서div다시 로드 -
" #id > *"를.load()와 함께 사용하여 JavaScript에서div다시 로드 -
window.setInterval()을 사용하여 JavaScript에서div새로 고침
JavaScript에서 div 요소를 다시 로드하는 한 줄 코딩 규칙을 찾는 것은 어렵습니다. 다시 로드하거나 새로 고치는 일반적인 방법은 onload 기능을 조정하거나 전체 웹 페이지를 트리거하는 것입니다.
웹 페이지가 부피가 큰 경우 항상 선호되는 것은 아닙니다. 아마도 우리는 특정 섹션을 새로 고치는 민첩한 방법을 원합니다.
이 문제를 해결하기 위해 우리는 웹페이지의 현재 경로를 취하고 함께 div의 id를 추가하는 jQuery .load() 함수에만 의존할 것입니다. 이는 웹페이지 콘텐츠에서 div의 위치를 나타내는 id를 구체적으로 추가하고 새로 고치도록 하기 위한 것입니다.
우리가 따를 또 다른 방법은 div를 새로 고칠 때 이후의 시간 제한을 추적하는 것입니다. 이 경우 사용자 정의 시간 제한과 협력하기 위해 HTML의 간단한 동적 속성이 필요합니다.
이것은 jQuery의.load()만큼 전용으로 보이지 않을 수 있지만 JavaScript를 통해 비교적 쉽게 다룰 수 있습니다. 코드 블록으로 넘어갑시다.
.load()에서 window.location.href를 사용하여 JavaScript에서 div 다시 로드
이 예에서 가장 중요한 세그먼트는 대상 div 인스턴스를 사용하는 id 속성입니다. 전체가 아닌 div를 사용하여 웹페이지의 해당 부분을 로드합니다.
처음에는 시간 프레임을 계산하기 위해(잘 작동하는지 확인하기 위해) span 태그가 있는 div가 있습니다. 나중에 load() 함수를 사용하기 위해 div(#here)의 인스턴스를 사용합니다.
.load() 함수에서 매개변수는 현재 웹사이트의 경로를 나타내는 window.location.href입니다. 그리고 #here id는 대상을 할당하고 새로 고칩니다.
코드 조각:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
<div id="here">dynamic content <span id='off'>9</span></div>
<div>ABC</div>
</div>
<script>
$(document).ready(function(){
var counter = 9;
window.setInterval(function(){
counter = counter - 3;
if(counter>=0){
document.getElementById('off').innerHTML=counter;
}
if (counter===0){
counter=9;
}
$("#here").load(window.location.href + " #here" );
}, 3000);
});
</script>
출력:
여기에서 카운터는 3초마다 변경됩니다. 화면 캡처로 인해 타이밍 비율은 최소 3초가 될 수 있지만 프로세스가 작동 중임을 유추합니다.
" #id > *"를 .load()와 함께 사용하여 JavaScript에서 div 다시 로드
이 섹션에서는 .load() 함수를 다시 사용하고 이번에는 매개변수로 " #here > *"를 전달합니다. #id를 표시하기 전에 공백을 추가하는 것을 고려하십시오.
이 전체 섹션은 설명된 다른 예와 같이 수행됩니다.
코드 조각:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
<div id="here"> again dynamic content <span id='off'>3</span></div>
<div>ABC</div>
</div>
<script>
$(document).ready(function(){
var counter = 3;
window.setInterval(function(){
counter--;
if(counter>=0){
document.getElementById('off').innerHTML=counter;
}
if (counter===0){
counter=3;
}
$("#here").load(" #here > *");
}, 1000);
});
</script>
출력:
window.setInterval()을 사용하여 JavaScript에서 div 새로 고침
여기에서 div를 가져와 id 속성을 설정합니다. 스크립트 섹션에서 카운트 시계를 활성화합니다.
이 예는 일정 시간 후에 웹 페이지에 표시할 콘텐츠 배열이 있는 좋은 예가 될 수 있습니다. 여러 div가 표시되고 시간이 완전히 카운트다운된 후 배열 인덱스가 변경된다고 가정합니다.
따라서 우리는 많은 콘텐츠를 동적으로 처리하는 방식을 갖게 될 것입니다.
아래 예에서는 그러한 배열 데이터를 가져오지 않았습니다. 오히려 우리는 클럭 사이클을 시작했습니다. 더 나은 미리보기를 위해 코드 펜스를 확인합시다.
<div>
The DIV below will refresh after <span id="cnt" style="color:red;">7</span> Seconds
</div>
</body>
<script>
var counter = 7;
window.setInterval(function () {
counter--;
if (counter >= 0) {
var span;
span = document.getElementById("cnt");
span.innerHTML = counter;
}
if (counter === 0) {
counter = 7;
}
}, 1000);
</script>
출력:
