在HTML头部连接JS消息循环-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

在HTML头部连接JS消息循环

P粉731861241 2023-09-05 10:55:30

[JavaScript讨论组]

939

我一直在尝试制作一个每小时更换的消息循环（一次只显示一个），我对HTML还可以，但对JS不太擅长。（消息应该放在h3标签中）

我试图将我的JS循环链接到HTML文本元素中，但失败了。

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

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

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

P粉731861241

全部回复(1)

P粉2390894432023-09-06 09:59:38 1楼

不要将标题包裹在标题中
看起来你想要一个消息数组。我在下面展示了如何创建这样一个数组
当元素已经存在于页面上时，不需要使用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秒执行一次
});

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>