JavaScript 重新載入 DIV

Anika Tabassum Era 2023年1月30日 2022年7月12日
  1. .load() 中使用 window.location.href 在 JavaScript 中重新載入 div
  2. 使用 " #id > *".load() 在 JavaScript 中重新載入 div
  3. 使用 window.setInterval() 在 JavaScript 中重新整理 div
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>

輸出:

使用 .load 中的 window.location.href 重新載入 div

在這裡,我們的計數器每 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>

輸出:

使用 id 和 .load() 重新載入 div

使用 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>

輸出:

使用 window.setInterval() 重新整理 div

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript Div