JavaScript 重新載入 DIV
-
在
.load()
中使用window.location.href
在 JavaScript 中重新載入div
-
使用
" #id > *"
和.load()
在 JavaScript 中重新載入div
-
使用
window.setInterval()
在 JavaScript 中重新整理div
在 JavaScript 中找到一個單行編碼約定來重新載入 div
元素是很困難的。重新載入或重新整理的一般方法是調整 onload
功能或觸發整個網頁。
如果網頁很大,這可能並不總是首選;更有可能的是,我們想要一種敏捷的方式來重新整理某些部分。
為了解決這個問題,我們將完全依賴 jQuery .load()
函式,該函式獲取網頁的當前路徑並新增 div
的 id。這是為了確保我們會在網頁內容中專門新增 id
來表示 div
的位置並重新整理它。
我們將遵循的另一種方法是在我們希望重新整理 div
之後跟蹤時間限制。在這種情況下,我們將需要 HTML 中的簡單動態屬性來與使用者定義的時間限制協作。
這可能看起來不像 jQuery 的 .load()
那樣專用,但通過 JavaScript 處理它相對容易。讓我們跳到程式碼塊上。
在 .load()
中使用 window.location.href
在 JavaScript 中重新載入 div
本例中最重要的部分是 id
屬性,它將採用目標 div
例項。我們將使用 div
載入網頁的那一部分,而不是整個網頁。
最初,我們將有一個帶有 span
標籤的 div
來計算時間範圍(檢查它是否工作正常)。稍後我們將使用 div
(#here
) 的例項來使用 load()
函式。
在 .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>
輸出: