變更文字的顏色每秒鐘

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的每一步轉動藍色>黃色>藍色>黃色每一秒按升序排列。我無法弄清楚我做錯了什麼。

來源

2017-04-13 Kshitij Wahati

是[這]（https://jsfiddle.net/tusharj/rn8ff2pj /）正確嗎？ – Tushar

1.在changeColor函數中添加一個右括號「}」。 2.刪除windows.setinterval中的引號：window.setInterval（changeColor，1000）; 3.確保在DOM已加載後加載JavaScript。 – alfredo

'window.setInterval（「changeColor」，1000）;'不需要在函數名稱周圍加引號...... – Shadow

您現有的，因爲你離開收盤}了你的功能，因爲在號召setInterval()在第一個參數的函數名不應該在引號（也就是傳遞一個函數JS不起作用引用，而不是字符串）。

但是，您的代碼僅引用列表中的第一個元素，並且您表示想要更改「每個步驟......按升序排列」。因此，也許你可以做類似下面，使用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>

來源

2017-04-13 04:23:18 nnnnnn

這裏是工作的代碼

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

來源

2017-04-13 04:09:35

它不適用於我，顏色不在文本上彈出。 –

對不起，這是我的錯誤 –

請參閱我的第二個答案 –

這工作

<!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>

來源

2017-04-13 04:19:02 alfredo

你只是試圖改變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);

這個答案假定您希望它們都更改爲在同一時間相同的顏色。

來源

2017-04-13 04:19:04

請參閱該代碼

<html> 
<head> 
<script type="text/javascript"> 
    var i = 1; 
    var x = setInterval(function() { 
    var x = document.getElementById("li1"); 
    console.log(x.style.color); 
     if (x.style.color == "blue"){ 
      x.style.color = "yellow"; 
     } else if (x.style.color === "yellow"){ 
     x.style.color = "red"; 
    } else if (x.style.color === "red"){ 
     x.style.color = "blue"; 
    } 

    }, 1000); 

</script> 
</script> 
<body> 
<div class="leftDiv"> 
     <div id = "stepsId" > 
     <ol> 
      <li id="li1" style="color: blue;"><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>

來源

2017-04-13 04:20:50

兩件事情，首先要考慮：

您發佈的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);

來源

2017-04-13 04:21:23 user886

爲了達到預期的效果，請使用以下選項使用的setInterval

Codepen網址爲參比http://codepen.io/nagasai/pen/NjWBxv

1.Initialize外功能
2.toggle顏色顏色：

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

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

window.setInterval(changeColor,1000);

有幾個語法錯誤，如缺少關閉'}'和刪除函數的引號，因爲它不是一個字符串

來源

2017-04-13 04:24:35

這就是你如何實現一個循環！但要小心，而選擇LIS，怎麼一回事，因爲我只是用的getElementsByTagName，這將給你所有的li元素

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);

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

來源

2017-04-13 04:30:27

變更文字的顏色每秒鐘

回答

相關問題