Sambungkan gelung mesej JS dalam pengepala HTML

Question

Saya telah cuba membuat gelung mesej yang berubah setiap jam (hanya memaparkan satu demi satu), saya ok dengan HTML tetapi tidak begitu baik dengan JS. (Mesej hendaklah diletakkan dalam teg h3)

Saya cuba memautkan gelung JS saya ke dalam elemen teks HTML tetapi gagal.

h3 = document.createElement("h3");
var messages = "Mesej 1", "Mesej 2", "Mesej 3", "Mesej 4", "Mesej 5", "Mesej 6";
pembilang var = 0;

fungsi myLoop() {
  setTimeout(myLoop, 3, 600, 000);
  document.getElementById("Mesej")
  document.body.appendChild(h3);
}
myLoop();

<h3>
  <h3 id="Mesej"></h3>
</h3>

Answer 1

1. Jangan bungkus tajuk anda dengan tajuk
2. Nampaknya anda mahukan bersusun mesej. Saya tunjukkan di bawah cara membuat tatasusunan sedemikian
3. Tidak perlu menggunakan appendChild apabila elemen sudah wujud pada halaman
4. 3,600,000不是有效的毫秒数。使用3600000或60*60*1000

Dalam kod saya, saya menggunakan eventListener untuk menunggu elemen html pada halaman tersedia sebelum melaksanakannya

Pernyataan (counter++)%len akan bermula dari 0, gunakan Baki (counter++)%len将从0开始，使用余数运算符%在消息数组的长度处进行循环。它避免了if (counter=> length) counter = 0; pengendali % gelung sepanjang panjang tatasusunan mesej. Ia mengelakkan jika (counter=> length) counter = 0;

=> ialah fungsi anak panah, dibina seperti berikut

const functionName (parameter) => { };

Setara secara fungsional dengan (dan beberapa perkara lain)

function functionName(parameter) { };

Jika anda perlu melaksanakannya setiap jam, sila tukar 2000 kepada 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>