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

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

在HTML头部连接JS消息循环

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

[JavaScript讨论组]

823

<p>我一直在尝试制作一个每小时更换的消息循环（一次只显示一个），我对HTML还可以，但对JS不太擅长。（消息应该放在h3标签中）</p> <p>我试图将我的JS循环链接到HTML文本元素中，但失败了。</p> <p> <pre class="brush:js;toolbar:false;">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();</pre> <pre class="brush:html;toolbar:false;"><h3> <h3 id="Message"></h3> </h3></pre> </p>

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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>