Question

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中的颜色，每一步都变为蓝色＆gt;黄色＆gt;蓝色＆gt;黄色每秒按升序排列。我无法弄清楚我做错了什么。

Answer 1

你现有的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>

Answer 2

这是工作代码

    <html>
    <head>
    <script type="text/javascript">

      var x = setInterval(function() {

        console.log('rrr');
       var x = document.getElementById("li1");
            x.style.color = "blue";
            if (x.style.color == "blue"){
            x.style.color = "yellow";
            }
        }, 1000);

    </script>
    </script>
    <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>
    </html>

Answer 3

这有效

<!DOCTYPE html>
    <html>
<head>
    <script>

        window.onload = function(){

        var x = document.getElementById("li1");
        x.style.color = "blue";

        function changeColor(){
            if (x.style.color == "blue"){
                x.style.color = "yellow";
            }
            else if (x.style.color == "yellow"){
                x.style.color = "blue";
            }
        };
        window.setInterval(changeColor,1000);



        };
    </script>
</head>
<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>
</html>

Answer 4

您只是尝试更改li1，而不是所有li元素，我认为这是您的意图。尝试使用document.querySelectorAll代替document.getElementById，然后迭代遍历数组，就像这样

function changeColor() {
  var x = document.querySelectorAll("#stepsId li");

    for (var i = 0; i < x.length; i++) {
        x[i].style.color = x[i].style.color === 'blue' ? 'yellow' : 'blue';
   }
}
window.setInterval(changeColor, 1000);

此答案假设您希望它们同时更改为相同的颜色。

Answer 5

参考此代码

gvim

Answer 6

首先要考虑两件事：

您发布的JavaScript在语法上没有效果，因为您无法关闭if语句大括号（“}”）。
您的功能中的代码会很快。您将在页面上看到的唯一颜色变化是函数完成时的最终颜色值。

您需要跟踪哪个元素在任何特定点处是黄色的，并设置您的函数以确定接下来应该将哪个元素变为黄色。

var li1 = document.getElementById("li1");
var li2 = document.getElementById("li2");
var li3 = document.getElementById("li3");
var yellow = li1;

function changeColor() {
  if(li1 == yellow) {
    yellow = li2;
  } else if(li2 == yellow) {
    yellow = li3;
  } else {
    yellow = li1;
  }

  li1.style.color = "blue";
  li2.style.color = "blue";
  li3.style.color = "blue";
  yellow.style.color = "yellow";
}

window.setInterval(changeColor, 1000);

Answer 7

要达到预期效果，请使用以下选项

1.初始化颜色外部功能
2.使用setInterval

切换颜色

Codepen网址供参考 - http://codepen.io/nagasai/pen/NjWBxv

JS：

var x = document.getElementById("li1");
 x.style.color = "blue";

function changeColor(){
 x.style.color = x.style.color == "blue"?"yellow":"blue";
}

window.setInterval(changeColor,1000);

很少有语法错误，例如错过关闭＆＃39;}＆＃39;并删除函数的引号，因为它不是字符串

Answer 8

这就是你如何实现一个循环！但是在选择lis时要小心，因为我只是使用了 getElementsByTagName ，这将为你提供所有的li元素

＆＃13;

var lis = document.getElementsByTagName("li");
var i = 0
var color ='blue'
function changeColor(){
  if(i==3){
    i=0
  } 
  lis[i].style.color = color;
  if (lis[i].style.color == "blue"){
    color = 'yellow'
  }
  else{
    color = 'blue'
  }
  i = i+1;
}
window.setInterval(changeColor,1000);

＆＃13;

<html>
<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>
</html>

＆＃13;

每秒更改文本颜色

8 个答案: