更改编号的颜色

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。