Verbinden Sie die JS-Nachrichtenschleife im HTML-Header
P粉731861241
P粉731861241 2023-09-05 10:55:30
0
1
509
<p>Ich habe versucht, eine Nachrichtenschleife zu erstellen, die sich stündlich ändert (es wird jeweils nur eine angezeigt). Mit HTML komme ich zurecht, aber mit JS nicht so gut. (Die Nachricht sollte im h3-Tag platziert werden)</p> <p>Ich habe versucht, meine JS-Schleife in ein HTML-Textelement zu verknüpfen, aber es ist fehlgeschlagen. </p> <p> <pre class="brush:js;toolbar:false;">h3 = document.createElement("h3"); var message = „Nachricht 1“, „Nachricht 2“, „Nachricht 3“, „Nachricht 4“, „Nachricht 5“, „Nachricht 6“; var counter = 0; Funktion myLoop() { setTimeout(myLoop, 3, 600, 000); document.getElementById("Nachricht") document.body.appendChild(h3); } myLoop();</pre> <pre class="brush:html;toolbar:false;"><h3> <h3 id="Nachricht"></h3> </h3></pre> </p>
P粉731861241
P粉731861241

Antworte allen(1)
P粉239089443
  1. 不要将标题包裹在标题中
  2. 看起来你想要一个消息数组。我在下面展示了如何创建这样一个数组
  3. 当元素已经存在于页面上时,不需要使用appendChild
  4. 3,600,000不是有效的毫秒数。使用360000060*60*1000

在我的代码中,我使用eventListener来等待页面上的html元素可用后再执行

语句(counter++)%len将从0开始,使用余数运算符%在消息数组的长度处进行循环。它避免了if (counter=> length) counter = 0;

=>是一个箭头函数,构造如下

const functionName (parameter) => { };

在功能上等同于(还有一些其他的东西)

function functionName(parameter) { };

如果需要每小时执行一次,请将2000更改为3600000

const messages = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5", "Message 6"];
const len = messages.length;
let counter = 0;

window.addEventListener("DOMContentLoaded", () => { // 当页面加载完成且h3可用时
  const h3 = document.getElementById("Message");
  const myLoop = () => h3.textContent = messages[(counter++) % len]; // 循环并包装
  myLoop(); // 立即执行一次
  setInterval(myLoop, 2000); // 然后每2秒执行一次
});
<div>
  <h3 id="Message"></h3>
</div>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage