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 bien avec JS. (Le message doit être placé dans une balise h3) J'essaie de lier ma boucle JS à un élément de texte HTML mais j'échoue. h3=document.createElement("h3");varmessages="Message1", "Message2", "Message3

P粉239089443 · Answer

N'enveloppez pas votre titre dans un titre
On dirait que vous voulez un ensemble de messages. Je montre ci-dessous comment créer un tel tableau
Pas besoin d'utiliser appendChild lorsque l'élément existe déjà sur la page
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秒执行一次
});