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