选取框，动态更改内容并重新开始滚动

Question

我的网站上有一个 marquee：

<marquee>Hello! <span id="text">Welcome to my website.</span></marquee>

我想从 marquee:

动态更改 id="text" 范围的内容

setTimeout(function() {
  document.getElementById("text").innerHTML = "This is my website. Happy reading!";
}, 5000);

<marquee>Hello! <span id="text">Welcome to my website.</span>
</marquee>

一切正常。问题是我想在更改文本后从头开始重新启动选取框。假设第一个文本较长，当与另一个文本更改时，第一次滚动时不会完全可读；访客将从中间看到它。

所以，我想从头开始重新启动选取框滚动。

Answer 1

也许不是您想要或期望的。但这应该会重新启动选取框。
我会用新元素删除并重新插入 DOM 中的选取框。

setTimeout(function() {
  document.getElementById("marquee").innerHTML = '<marquee>Hello! <span id="text">This is my website. Happy reading!</span></marquee>';
}, 5000);

<div id="marquee">
<marquee>Hello! <span id="text">Welcome to my website.</span>
</marquee>
</div>

Answer 2

Select 您的选取框并使用 .start() 重新启动它。

setTimeout(function() {
  document.getElementById("text").innerHTML = "This is my website. Happy reading!";
  document.getElementsByTagName("marquee")[0].start();
}, 5000);

<marquee>Hello! <span id="text">Welcome to my website.</span>
</marquee>

选取框，动态更改内容并重新开始滚动

Marquee, change content dynamically and restart scrolling

html

javascript

jquery

marquee