Javascript - 每3秒更改文字和顏色

我需要一些js代碼的幫助。我在其他主題中進行了搜索，我嘗試了一些代碼，但他們沒有工作。我需要每3秒更改2個文本，第二個文本也必須更改它們的顏色。Javascript - 每3秒更改文字和顏色

我用了一個jQuery代碼，第一部分完成了，但我不知道如何執行第二部分。

這是我的代碼

<html> 
<head> 
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script> 
<script> 
$(function() { 
    cuenta = 0; 
    txtArray = ["TEXT1", "TEXT2"]; 
    setInterval (function() { 
     cuenta++; 
     $("#titulos").fadeOut(100, function() { 
      $(this).text(txtArray [cuenta % txtArray.length]).fadeIn(100); 
     }); 
    }, 3000); 
}); 

</script> 
<body> 
<div> 
<p id="titulos">TEXT1</p> 
</div> 
</body> 
</html>

我怎樣才能改變第二陣列的顏色嗎？有沒有其他的方式來使這個代碼與純js，而不是jQuery？

感謝所有

來源

2015-11-11 LDM

如果我們拒絕回答，我們會從糟糕的網站設計中拯救自己嗎？ – ergonaut

當你已經包含它時不使用jQuery有什麼意義？是的，你可以做到這一點是原生JavaScript，但編碼會更復雜。 –

要使用jQuery更改CSS使用.css('rule-name', 'value')或.css({rule1: 'value', rule2: 'value'})

$(function() { 
 
    cuenta = 0; 
 
    txtArray = ["TEXT1", "TEXT2"]; 
 
    setInterval(function() { 
 
     cuenta++; 
 
     $("#titulos").fadeOut(100, function() { 
 
     $(this) 
 
      .text(txtArray[cuenta % txtArray.length]) 
 
      .css('color', cuenta % 2 == 0 ? 'red' : 'blue') 
 
      .fadeIn(100); 
 
     }); 
 
    }, 3000); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p id="titulos">TEXT1</p> 
 
</div>

來源

2015-11-11 13:23:43 Justinas

在這裏你去：

$(function() { 
    cuenta = 0; 
    txtArray = ["TEXT1", "TEXT2"]; 
    setInterval (function() { 
     cuenta++; 
     $("#titulos").fadeOut(100, function() { 
      $(this).text(txtArray [cuenta % txtArray.length]).fadeIn(100); 
      if(cuenta % txtArray.length == 1) 
      { 
       $(this).css("color","red"); 
      } 
      else 
      { 
       $(this).css("color","black"); 
      } 
     }); 
    }, 3000); 
});

來源

2015-11-11 13:22:52

感謝您的所有答案和建議！你們是最棒的！！ – LDM

試試這個

https://jsfiddle.net/33mbjjym/

var colors = ['blue', 'red', 'green', 'pink', 'yellow']; 
var colorIndex = 1; 
setInterval(function(){ 
    $('#titulos').css('color', colors[colorIndex]); 
    if(colorIndex < colors.length) 
     colorIndex += 1; 
    else 
     colorIndex = 1; 
}, 3000);

來源

2015-11-11 13:23:01 stackoverfloweth

不知道這是如何翻譯，如果你想排除jQuery – stackoverfloweth

它實際上只是在你的代碼單行改變：[這是一個純JS版本]（https://jsfiddle.net/33mbjjym/1/），只是注意你沒有任何淡化效果。 –

@SpencerWieczorek感謝您的信息 – stackoverfloweth

既然你使用JQuery，你可以使用css方法來改變顏色像這樣：

$(this).css("color", "red");

作爲offtopic和個人的建議，我建議你以英文命名你的變量:)。

來源

2015-11-11 13:25:08 roperzh

Javascript - 每3秒更改文字和顏色

回答

相關問題