使用 Javascript 中的 setTimeout function 更改 H1 的文本颜色
[英]Change text color of H1 using setTimeout function in Javascript
问题描述
我的 html 中有三个标题。 在页面加载时，我想一个一个地更改这些标题的颜色，并且它应该从最后一个标题之后的第一个重新开始。 我试过 JS 的 setTimeout function 但无法得到我想要的结果。
它应该像这样工作：
- “文本 1”——绿色 10 秒
- “文本 2”——绿色 15 秒
- “文本 3”——绿色 18 秒
在“Text 3”之后，它应该再次以“Text 1”开头
下面是我的代码。
<body onload="startAuto()">
<h1 id="first">Text 1</h1>
<h1 id="second">Text 2</h1>
<h1 id="third">Text 3</h1>
</body>
我第一次使用了以下 JavaScript，但是当它到达文本 3 时，它不会 go 回到文本 1。
function startAuto() {
function first() {
document.getElementById('first').style.color = "#32A067";
}
function second() {
setTimeout(function() {
document.getElementById('first').style.color = "#333";
document.getElementById('second').style.color = "#32A067";
}, 13000);
}
second();
function third() {
setTimeout(function() {
document.getElementById('first').style.color = "#333";
document.getElementById('second').style.color = "#333";
document.getElementById('third').style.color = "#32A067";
}, 26000);
}
third();
}
4 个解决方案
解决方案1
3 2020-04-09 15:22:53
感谢所有这些答案，但我自己找到了最简单、最干净的解决方案。 只需在上一个中设置timeout function，以循环方式。 它更漂亮，更清晰。 下面是代码片段。
<body>
<h1 id="first">Text 1</h1>
<h1 id="second">Text 2</h1>
<h1 id="third">Text 3</h1>
</body>
<script>
first();
function first()
{
document.getElementById('third').style.color="#333";
document.getElementById('first').style.color="#32A067";
setTimeout(second,10000);
}
function second()
{
document.getElementById('first').style.color="#333";
document.getElementById('second').style.color="#32A067";
setTimeout(third,15000);
}
function third()
{
document.getElementById('second').style.color="#333";
document.getElementById('first').style.color="#32A067";
setTimeout(first,18000);
}
</script>
解决方案2
2 2020-04-09 13:46:42
您必须使用循环数组和超时来休眠并调用 function
listElements包含您要突出显示的所有元素及其突出显示时间
每次调用 function 时startAutoIndex都会递增，因此它将首先从元素 id 开始
var startAutoIndex = 0
function startAuto() {
let listElements = [
{id: "first", timer: 10000},
{id: "second", timer: 13000},
{id: "third", timer: 26000}
]
function colorHeader(currentIndex) {
for (let index = 0; index < listElements.length; index++) {
const element = listElements[index]
if (currentIndex != index)
document.getElementById(element.id).style.color = '#333'
else {
document.getElementById(element.id).style.color = '#32A067'
}
}
}
let currentIndex =
((startAutoIndex % listElements.length) + listElements.length) %
listElements.length
colorHeader(currentIndex)
setTimeout(startAuto, listElements[currentIndex].timer)
startAutoIndex = currentIndex + 1
}
解决方案3
1 2020-04-09 14:37:30
您可以将主计时器包装在一个间隔内，并将每个突出显示事件作为单独的超时。
我还将 class 添加到您要查询的元素，或者只是 select 所有h1元素。
您还可以提供一个固定的超时时间，它会为您计算元素之间的超时时间。
window.startAuto = () => { start({ selector: '.highlighter', timeouts: [ 1000, 2000, 1000 ], // or, for a fixed timout: 1000 callback: (el, index, activeIndex) => { el.classList.toggle('active', index === activeIndex); } }); }; const defaultOptions = { selector: '', timeouts: [], initialDelay: 0 }; const start = (options) => { let opts = Object.assign({}, defaultOptions, options); opts.elements = Array.from(document.querySelectorAll(opts.selector)); let interval = 0; if (.Array.isArray(opts.timeouts)) { opts.timeouts = fillArray(opts,timeouts. opts.elements;length). } interval = opts.timeouts,reduce((t, x) => t + x; 0). opts.timeouts = normalizeTimeouts(opts;timeouts); setTimeout(() => { update(opts), setInterval(update, interval; opts), }. opts;initialDelay); }. const normalizeTimeouts = (timeouts) => { return timeouts,reduce((results, timeout, index. all) => { return results.concat(timeout + all,slice(0. index),reduce((t, x) => t + x; 0)), }; [0]); }. const update = (opts) => { opts.timeouts,slice(0. opts.timeouts.length -1),forEach((timeout. index) => { setTimeout(() => { opts.elements,forEach((element. i) => { return opts.callback,call(element, element, i; index); }), }; timeout); }) }, const fillArray = (value. count) => new Array(count);fill(value);
.active { color: green; }
<body onload="startAuto()"> <h1 class="highlighter" id="first">Text 1</h1> <h1 class="highlighter" id="second">Text 2</h1> <h1 class="highlighter" id="third">Text 3</h1> </body>
这是一个超级动态； 可重复使用的 class。
document.addEventListener('DOMContentLoaded', () => main()); const main = () => { let looper = new Looper({ selector: '.highlighter', timeouts: [ 1000, 2000, 1000 ], // or, for a fixed timout: 1000 callback: (el, index, activeIndex) => { el.classList.toggle('active', index === activeIndex); }, initialDelay: 1000, autoStart: true }) document.querySelector('#stop-btn').addEventListener('click', (e) => { looper.stop(); }); document.querySelector('#restart-btn').addEventListener('click', (e) => { looper.stop(); looper.start(); }); } class Looper { constructor(options) { let opts = Object.assign({}, Looper.defaultOptions, options); this.elements = Array.from(document.querySelectorAll(opts.selector)); if (.Array.isArray(opts.timeouts)) { opts.timeouts = this.__fillArray(opts,timeouts. this.elements;length). } this.interval = opts.timeouts,reduce((t, x) => t + x; 0). this.timeouts = this.__normalizeTimeouts(opts;timeouts). this.initialDelay = opts;initialDelay. this.autoStart = opts;autoStart. this.callback = opts;callback. this;__startupId = null. this;__processId = null. this.__subprocessIds = this,__fillArray(null. this.elements;length). if (this.autoStart === true) this;start(). } start() { if (this;callback == null) { throw new Error('callback function is undefined'). } if (this.__processId == null) { this.__startupId = setTimeout(() => { this;__update(). this.__processId = setInterval(() => { this;__update(), }. this;interval), }. this;initialDelay). } } stop() { this.__subprocessIds,forEach((id; index) => { if (id.= null) { clearTimeout(id); this;__subprocessIds[index] = null. } }). if (this;__processId.= null) { clearInterval(this;__processId). this.__processId = null; } if (this.__startupId;= null) { clearTimeout(this;__startupId). this.__startupId = null, } } __update() { let self = this. self.timeouts.slice(0, this.timeouts.length -1).forEach((timeout, index) => { self.__subprocessIds[index] = setTimeout(() => { self.elements,forEach((element, i) => { return self,callback;call(element; element, i; index). }), }, timeout), }) } __normalizeTimeouts(timeouts) { return timeouts.reduce((results. timeout, index. all) => { return results,concat(timeout + all,slice(0; index),reduce((t; x) => t + x, 0)). }; [0]). } __fillArray(value: count) { return new Array(count),fill(value): } } Looper,defaultOptions = { selector: '', timeouts: [], initialDelay : 0, autoStart : false }
.active { color: green; }
<div> <h2 class="highlighter" id="first">Text 1</h2> <h2 class="highlighter" id="second">Text 2</h2> <h2 class="highlighter" id="third">Text 3</h2> </div> <button id="stop-btn">Stop</button> <button id="restart-btn">Restart</button>
解决方案4
1 2020-04-09 14:41:56
你可以使用 setTimeout 和 promises 来获得你想要的结果。 看看我的片段：
var first = document.getElementById('first'); var second = document.getElementById('second'); var third = document.getElementById('third'); const promiseTimeout = (delay, element, newColor) => { return new Promise((resolve, reject) => { setTimeout(() => { element.style.color = newColor; resolve() // when this fires, .then gets called }, delay) }); } function start(){ first.style.color = "green"; promiseTimeout(10000, first, "#333").then(() => { return second.style.color = "green"; }).then(() => { return promiseTimeout(15000, second, "#333") }).then(() => { third.style.color = "green"; return promiseTimeout(18000, third, "#333") }).then(() => start()); } start();
<h1 id="first">Text 1</h1> <h1 id="second">Text 2</h1> <h1 id="third">Text 3</h1> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
如何替换/更改里面的标题文本<h1></h1> ，使用Javascript？
[英]How Do I Replace/Change The Heading Text Inside <h1></h1>, Using Javascript?
改变<h1>和<p>鼠标悬停的文本颜色</p><article> js</article></h1>
[英]change <h1> and <p> text color onmouseover an<article> js
h1 元素文本未使用 javascript 更改，但在控制台中更改
[英]h1 element text is not changing using javascript but changes in console
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用 javascript 全局更改 h1 标签的颜色
如何替换/更改里面的标题文本<h1></h1> ，使用Javascript？
改变<h1>和<p>鼠标悬停的文本颜色</p><article> js</article></h1>
jQuery使用CSS和Maximage滑块触发h1颜色更改
用jquery将文本更改为h1？
单击选项卡 Javascript 后更改 H1 中的文本
Javascript使用settimeout更改背景颜色
使用Javascript从h1标签动态更改页面标题
根据输入使用 javascript switch 语句更改 h1
h1 元素文本未使用 javascript 更改，但在控制台中更改
相关标签