gpt4 book ai didi

javascript - 每秒更改文本颜色

转载 作者:太空宇宙 更新时间:2023-11-03 22:42:43 24 4
gpt4 key购买 nike

HTML代码

function changeColor() {
var x = document.getElementById("li1");
x.style.color = "blue";
if (x.style.color == "blue") {
x.style.color = "yellow";
}
}
window.setInterval("changeColor", 1000);
<body>
<div class="leftDiv">
<div id="stepsId">
<ol>
<li id="li1"><b>Step 1</b></li>
<li id="li2"><b>Step 2</b></li>
<li id="li3"><b>Step 3</b></li>
</ol>
</div>
</div>
</body>

我的主要目标是循环从步骤 1 到 3 的颜色,每一步按升序每秒变为蓝色 > 黄色 > 蓝色 > 黄色。我不知道我做错了什么。

最佳答案

您现有的 JS 不起作用,因为您将结束 留在了您的函数之外,并且因为在调用 setInterval() 时第一个参数中的函数名称不应在引号中(即传递函数引用,而不是字符串)。

而且,您的代码仅引用列表中的第一个元素,并且您说您想要更改“每一步...按升序”。所以也许你可以做类似下面的事情,使用 document.querySelectorAll("#stepsId li") 选择所有 li 元素,然后遍历它们以按顺序更改它们的颜色:

var colors = ["blue", "yellow"]
var currentColor = 0
var lis = document.querySelectorAll("#stepsId li")

function changeColor() {
--currentColor
if (currentColor < 0) currentColor = colors.length -1
for (var i = 0; i < lis.length; i++) {
lis[i].style.color = colors[(currentColor +i) % colors.length]
}
}

setInterval(changeColor, 1000)
<div id="stepsId">
<ol>
<li id="li1"><b>Step 1</b></li>
<li id="li2"><b>Step 2</b></li>
<li id="li3"><b>Step 3</b></li>
</ol>
</div>

请注意,您可以将任意数量的颜色添加到数组中,它会循环遍历所有颜色:

var colors = ["blue", "yellow", "red", "green", "orange"]
var currentColor = 0
var lis = document.querySelectorAll("#stepsId li")
function changeColor() {
--currentColor
if (currentColor < 0) currentColor = colors.length -1
for (var i = 0; i < lis.length; i++) {
lis[i].style.color = colors[(currentColor +i) % colors.length]
}
}
setInterval(changeColor, 1000)
<div id="stepsId">
<ol><li id="li1"><b>Step 1</b></li><li id="li2"><b>Step 2</b></li><li id="li3"><b>Step 3</b></li></ol>
</div>

关于javascript - 每秒更改文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43383302/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com