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>
輸出：
