在Javascript中使用setTimeout函数更改H1的文本颜色
我的html中有三个标题。在页面加载时，我想一个接一个地更改这些标题的颜色，它应该在最后一个标题后的第一个标题中重新开始。我试过JS的setTimeout函数，但是没有得到我想要的结果 它应该是这样工作的： 文本1–绿色持续10秒 文本2–绿色持续15秒 文本3–绿色持续18秒 在文本3之后，它应该再次以文本1开头 下面是我的代码 文本1 文本2 文本3 我第一次使用了下面的JavaScript，但是当它到达文本3时，它不会返回到文本1 startAuto函数{ 功能优先{ document.getElementById'first'。style.color=32A067； } 功能秒{ setTimeoutfunction{ document.getElementById'first'。style.color=333； document.getElementById'second'.style.color=32A067； }, 13000; } 第二 功能三{ setTimeoutfunction{ document.getElementById'first'。style.color=333； document.getElementById'second'.style.color=333； document.getElementById'third'。style.color=32A067； }, 26000; } 第三 }在Javascript中使用setTimeout函数更改H1的文本颜色,javascript,html,function,Javascript,Html,Function,我的html中有三个标题。在页面加载时，我想一个接一个地更改这些标题的颜色，它应该在最后一个标题后的第一个标题中重新开始。我试过JS的setTimeout函数，但是没有得到我想要的结果 它应该是这样工作的： 文本1–绿色持续10秒 文本2–绿色持续15秒 文本3–绿色持续18秒 在文本3之后，它应该再次以文本1开头 下面是我的代码 文本1 文本2 文本3 我第一次使用了下面的JavaScript，但是当它到达文本3时，它不会返回到文本1 startAuto函数{ 功能优先{ document.g
您必须使用循环数组和超时来休眠和调用函数 listElements包含要高亮显示的所有元素及其高亮显示时间 startAutoIndex将在每次调用函数时递增，因此它将首先以元素id开始 var startAutoIndex=0 startAuto函数{ 让列表元素=[ {id:first，timer:10000}， {id:second，timer:13000}， {id:third，timer:26000} ] 函数colorHeadercurrentIndex{ 对于let index=0；index
您可以将主计时器包装在一个间隔内，并将每个突出显示的事件作为一个单独的超时 我还将向要查询的元素添加一个类，或者只选择所有h1元素 您还可以提供一个固定的超时，它将为您计算元素之间的超时 window.startAuto==>{ 开始{ 选择器：'.highlighter'， 超时：[100020001000]，//或者，对于固定超时：1000 回调：el，index，activeIndex=>{ el.classList.toggle'active'，index==activeIndex； } }; }; const defaultOptions={ 选择器：， 超时：[]， 初始延迟：0 }; 常量开始=选项=>{ 让opts=Object.assign{}，defaultOptions，options； opts.elements=Array.fromdocument.queryselector或allopts.selector； 设区间=0； if！Array.isArrayopts.Timeout{ opts.timeout=fillArrayopts.timeout，opts.elements.length； } interval=opts.timeouts.reducet，x=>t+x，0； opts.timeouts=normalizeTimeoutopts.timeouts； 设置超时=>{ 更新测试； 设置IntervalueUpdate、间隔、选项； }，选择初始延迟； }; 常量normalizeTimeouts=超时=>{ return timeouts.reduceresults、timeout、index、all=>{ 返回results.concattimeout+all.slice0，index.reducet，x=>t+x，0； }, [0]; }; const update=opts=>{ opts.timeouts.slice0，opts.timeouts.length-1.forEachtimeout，索引=>{ 设置超时=>{ opts.elements.forEachelement，i=>{ return opts.callback.callelement，元素，i，索引； }; }，超时； } }; const fillArray=value，count=>new Arraycount.fillvalue； .主动{ 颜色：绿色； } 文本1 文本2 文本3
您可以将setTimeout与承诺一起使用，以获得您想要的结果。查看我的代码片段： var first=document.getElementById'first'； var second=document.getElementById'second'； var third=document.getElementById'third'； const promiseTimeout=延迟，元素，newColor=> { 返回新的PromiseSolve，拒绝=>{ 设置超时=>{ element.style.color=newColor； resolve//当该命令触发时，。然后被调用 }，延迟 }; } 功能启动{ first.style.color=绿色； 允诺者超过10000，第一，333 .然后=>{ 返回second.style.color=绿色； } .然后=>{ 返回承诺时间15000秒333 } .然后=>{ 第三，style.color=绿色； 归还承诺书18000第三方333 } .然后=>开始； } 开始 文本1 文本2 文本3
您可以将setTimeout与承诺一起使用，以获得您想要的结果。查看我的代码片段： var first=document.getElementById'first'； var second=document.getElementById'second'； var third=document.getElementById'third'； const promiseTimeout=延迟，元素，newColor=> { 返回新的PromiseSolve，拒绝=>{ 设置超时=>{ element.style.color=newColor； resolve//当该命令触发时，。然后被调用 }，延迟 }; } 功能启动{ first.style.color=绿色； 允诺者超过10000，第一，333 .然后=>{ 返回second.style.color=绿色； } .然后=>{ 返回承诺时间15000秒333 } .然后=>{ 第三，style.color=绿色； 归还承诺书18000第三方333 } .然后=>开始； } 开始 文本1 文本2 文本3
感谢所有这些答案，但我自己已经找到了最简单、最干净的解决方案。只需在前一个函数中以循环方式设置Timeout函数。它更漂亮、更清晰。下面是代码片段
<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>
感谢所有这些答案，但我自己已经找到了最简单、最干净的解决方案。只需在前一个函数中以循环方式设置Timeout函数。它更漂亮、更清晰。下面是代码片段
<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>
如果你需要更多关于我的答案的解释，不要犹豫选择我的解决方案，我相信，你会喜欢的；谢谢大家。我也发布了我自己版本的解决方案。如果你需要更多关于我的答案的解释，不要犹豫选择我的解决方案，我相信，你会喜欢的；谢谢大家。我也发布了我自己版本的解决方案。谢谢你的回答，虽然我已经找到了我自己的解决方案，对我来说这更清楚。你能看一下吗？下面是我的答案。谢谢你的回答，虽然我已经找到了自己的解决办法，对我来说，这更清楚。你能看一下吗？下面是我的答案。谢谢你的回答，虽然我已经找到了自己的解决办法，对我来说，这更清楚。你能看一下吗？下面是我的答案。谢谢你的回答，虽然我已经找到了自己的解决办法，对我来说，这更清楚。你能看一下吗？下面是我的答案。Thanks@Polywhirl谢谢你的回答，尽管我已经找到了自己的解决方案，对我来说那就是麦克利尔。你能看一下吗
我的回答任何建议都会有帮助。Thanks@Polywhirl谢谢你的回答，尽管我已经找到了自己的解决方案，对我来说那就是麦克利尔。你能看看我的答案吗？任何建议都会有帮助的。谢谢，但是如果你想再加一个，事情会很累人的header@Quantumass是的，你是对的。但因为我只有这三个主要标题，所以我选择了这种方法：很好，但是如果你想再加一个，事情会很累人的header@Quantumass是的，你是对的。但因为我只有这三个主要标题，所以我选择了这种方法：