Question

我是新来的。我想知道你是否可以帮助我。我喜欢偶然的颜色（一个矩形）。我希望颜色每5秒更换一次我已经选择的颜色，当点击矩形时，它会呈现当时的颜色。谢谢。

Answer 1

试试这个：

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

Answer 2

首先，您应该使用jQuery id selector（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);

更改ID的颜色

2 个答案: