迹忆客 专注技术分享

在 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>

输出：