javascript - 更改 id 的颜色

Question

我是新来的。我想知道你是否可以帮助我。我想试试 id 的颜色（一个矩形）。我希望颜色每 5 秒更改为我已经选择的一些颜色，当单击矩形时，它将采用当时的颜色。谢谢你。

Answer 1

试试这个：

HTML：

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

脚本：

$(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 秒自动更改一次，请使用上面的代码，例如：

脚本：

$(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 选择器 ( 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);