在HTML頭部連接JS訊息循環

Question

我一直在嘗試製作一個每小時更換的訊息循環（一次只顯示一個），我對HTML還可以，但對JS不太擅長。 （訊息應該放在h3標籤中）我試圖將我的JS循環連結到HTML文字元素中，但失敗了。 h3=document.createElement("h3");varmessages="Message1","Message2","Message3

P粉239089443 · Answer

不要將標題包裹在標題中
看起來你想要一個訊息數組。我在下面展示瞭如何創建這樣一個數組
當元素已經存在於頁面上時，就不需要使用appendChild
3,600,000不是有效的毫秒數。使用3600000或60*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秒执行一次
});