更改編號的顏色

Question

我是新手。我想知道你能否幫助我。我希望能偶然識別一個id（一個矩形）的顏色。我希望顏色每5秒改變一次我已經選擇的顏色，當點擊矩形時，它會在當時呈現顏色。 謝謝。

Answer 1

首先，你應該選擇你的元素使用jQuery id選擇器（http://api.jquery.com/id-selector/）。例如，如果你的元素命名爲「MyElement」，那麼你應該寫$（「＃MyElement」）

選擇一個元素後，你可以調用一些jQuery函數。在你的情況下，你可以調用.css（）函數來改變矩形的背景色（可能是div元素？）。所以代碼將像$（「＃MyElement」）。css（「background-color」，「red」）;您可以預先定義JavaScript數組中的顏色：var colors = [「red」，「green」，「blue」];然後創建一個將每5秒調用一次的方法（使用JavaScript方法setInterval）並將更改顏色。

我已經寫了整個代碼爲您提供：http://jsfiddle.net/Ww74t/

HTML：

<div id="MyElement"></div> 

CSS：

#MyElement { 
    width: 500px; 
    height: 500px; 
} 

的JavaScript：

var colors = ["red", "green", "blue"]; 
var currentColorIndex = 0; 
$("#MyElement").css("background-color", colors[currentColorIndex % colors.length]); 
setInterval(function(){ 
    currentColorIndex++; 
    $("#MyElement").css("background-color", colors[currentColorIndex % colors.length]); 
},5000); 

Answer 2

試試這個：

HTML：

<div id="rectangleId">Test</div> 

SCRIPT：

$(function(){ 
    var myArray=['red','yellow','blue']; 
    $('#rectangleId').on('click',function(){ 
     var rand = myArray[Math.floor(Math.random() * myArray.length)]; 
     $(this).css('color', rand); 
    }); 
}); 

小提琴：http://jsfiddle.net/3QMuT/

對於自動變化在每5秒使用上面的代碼，如：

SCRIPT：

$(function(){ 
    var myArray=['red','yellow','blue']; 
    setInterval(function(){ 
     var rand = myArray[Math.floor(Math.random() * myArray.length)]; 
     $('#rectangleId').css('color', rand); 
    },5000); 
}); 

小提琴：http://jsfiddle.net/3QMuT/1/

注：您必須添加任何使用前請使用jQuery version。