Connectez la boucle de message JS dans l'en-tête HTML

Question

J'ai essayé de créer une boucle de messages qui change toutes les heures (n'en affiche qu'un à la fois), je suis d'accord avec HTML mais pas très bon avec JS. (Le message doit être placé dans la balise h3)

J'essaie de lier ma boucle JS à un élément de texte HTML mais j'échoue.

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

fonction maBoucle() {
  setTimeout(maBoucle, 3, 600, 000);
  document.getElementById("Message")
  document.body.appendChild(h3);
}
maBoucle();

<h3>
  <h3 id="Message"></h3>
</h3>

Answer 1

1. N'enveloppez pas votre titre dans un titre
2. On dirait que vous voulez un ensemble de messages. Je montre ci-dessous comment créer un tel tableau
3. Pas besoin d'utiliser appendChild lorsque l'élément existe déjà sur la page
4. 3,600,000不是有效的毫秒数。使用3600000或60*60*1000

Dans mon code, j'utilise eventListener pour attendre que l'élément html de la page soit disponible avant de l'exécuter

L'instruction (counter++)%len commencera à 0, utilisez L'opérateur reste (counter++)%len将从0开始，使用余数运算符%在消息数组的长度处进行循环。它避免了if (counter=> length) counter = 0; % boucle sur la longueur du tableau de messages. Cela évite if (counter=> length) counter = 0;

=> est une fonction fléchée, construite comme suit

const functionName (parameter) => { };

Fonctionnellement équivalent à (et quelques autres choses)

function functionName(parameter) { };

Si vous devez l'exécuter toutes les heures, veuillez changer 2000 en 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>