#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
У меня есть страница с сеткой 4×4, и два квадрата меняют цвет, один белый, а другой черный. Мне нужно знать, как внести изменения в скрипт, чтобы белый цвет отображался перед черным.
Пожалуйста, кто-нибудь может помочь мне решить эту проблему, код вставлен ниже:
HTML:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<LINK REL=StyleSheet HREF="style1.css" TYPE="text/css" MEDIA=screen>
<SCRIPT LANGUAGE="JavaScript" SRC="script1.js"> </SCRIPT>
</head>
<body>
<div class="container">
<div class="box spacing"></div>
<div class="box spacing"></div>
<div class="box spacing"></div>
<div id="square1id" class="box"></div>
<div class="box spacing"></div>
<div class="box spacing"></div>
<div id="square2id" class="box spacing"></div>
<div class="box"></div>
<div class="box spacing"></div>
<div class="box spacing"></div>
<div class="box spacing"></div>
<div class="box"></div>
<div class="box spacing"></div>
<div class="box spacing"></div>
<div class="box spacing"></div>
<div class="box"></div> </div>
</body>
</html>
css:
body{
background-color:#000000;
margin:0;
padding:0;
}
h1{
color:#ffffff;
text-align:center;
}
.container{
overflow:hidden;
width:860px;
margin-left:250px;
margin-top:20px;
}
.box{
width:210px;
height:120px;
float:left;
background-color:#4D4D4D;
margin-bottom:3px;
}
.spacing{
margin-right:3px;
}
JavaScript:
$(document).ready(function(){
var colourinfo = {
square1id: [
'#FFE600'
],
square2id: [
'#008B45'
]
};
var count = 0;
var changecol = function(){
$.each(colourinfo, function(tileid, colarray){
$('#' tileid).css('background-color', colarray[count%colarray.length]);
});
count ;
};
setInterval(changecol, 1000);
});
Я был бы признателен за любую помощь в этом. Спасибо.
Ответ №1:
Следующее настраивает массив, где каждый элемент является объектом, задающим обычный цвет и цвет выделения для каждого квадрата. Вызываемая через setInterval() функция changeColour() изменяет цвет последнего квадрата обратно на обычный, а следующий квадрат — на выделенный:
var colourInfo = [
{id : "square1id",
colourNormal : "#4D4D4D",
colourHighlight : "#FFE600"},
{id : "square2id",
colourNormal : "#4D4D4D",
colourHighlight : "#008B45"}
// add your other squares' info here
];
var index = 0;
var changeColour = function(){
$('#' colourInfo[index]["id"]).css('background-color',
colourInfo[index]["colourNormal"]);
if ( index >= colourInfo.length)
index = 0;
$('#' colourInfo[index]["id"]).css('background-color',
colourInfo[index]["colourHighlight"]);
}
setInterval(changeColour,1000);
Примечание: оператор if в середине функции changeColour() просто увеличивает индекс и продолжает цикл по порядку вокруг массива. Если вы хотите, чтобы квадраты меняли цвет в случайном порядке, вы могли бы заменить оператор if чем-то вроде
index = Math.floor(Math.random() * colourInfo.length);
РЕДАКТИРОВАТЬ: Я предположил выше (из-за использования Дэвидом setInterval()), что идея заключалась в том, чтобы продолжать менять цвета бесконечно. Теперь, когда я обнаружил, что идея заключалась в том, чтобы прошивать каждый квадрат один раз, я бы предложил следующее (непроверенное) изменение. (Да, я знаю, что это становится неуклюжим, но я не мог заморачиваться, начиная с нуля, и я полагаю, что смысл в том, чтобы дать Дэвиду несколько идей о том, как он мог бы это сделать, а не выполнять за него его работу и представить прекрасный шедевр с модульным тестированием и документацией.)
var index = -1;
var changeColour = function(){
if (index > -1) {
$('#' colourInfo[index]["id"]).css('background-color',
colourInfo[index]["colourNormal"]);
}
if ( index < colourInfo.length) {
$('#' colourInfo[index]["id"]).css('background-color',
colourInfo[index]["colourHighlight"]);
setTimeout(changeColour,1000);
}
}
setTimeout(changeColour,1000);
Комментарии:
1. большое вам спасибо за вашу помощь, но, похоже, у меня это не работает.
2. @David — извините, в моем коде была опечатка (я сделал забавную копипасту в двух строках и в итоге получил
colourInfo[colourInfo[вместо простоcolourInfo[. Думаю, теперь я это исправил. В любом случае вот рабочий пример: jsfiddle.net/kUaAW (примечание: я скопировал ваши HTML и CSS непосредственно в jsfiddle, не изменяя их, поэтому я не стал утруждать себя исправлением уродливого форматирования, которое возникло по умолчанию при вставке, но что вас волнует, так это JS …) — не просто копируйте это в свой проект, прочтите его и убедитесь, что вы это понимаете.3. большое спасибо, я очень ценю вашу помощь. Если бы вы могли, не были бы вы так добры, дайте мне знать, возможно ли остановить последовательность после ее завершения. Спасибо
4. @David — смотрите мой обновленный, но непроверенный код выше. Если вы довольны, что это близко к тому, что вам нужно, не стесняйтесь принять мой ответ.
5. @nnnnnn — отлично, я пробовал jsfiddle.net/kUaAW решение и тренировка хорошо для меня. Я также работаю над аналогичным проектом, но с 4 цветами в последовательности, начиная с первого. не могли бы вы, пожалуйста, посоветовать, какие изменения требуются в скрипте, чтобы последовательность начиналась с square1id и так далее в цикле. На данный момент он начинается с square2id первым, а в следующем цикле он начинается с 1-го. Я был бы признателен за любую помощь в этом. Заранее спасибо.
Ответ №2:
Похоже, что цвета заданы в Colorinfo. Попробуйте это:
var colourinfo = {
square1id: ['#FFFFFF'],
square2id: ['#000000']
};
Комментарии:
1. Извините, я знаю, где находятся цвета, мне нужно изменить скрипт, чтобы идентификатор square1 отображался перед идентификатором square2. Спасибо
2. Разве вы не можете просто изменить HTML и поменять местами расположения двух разделов?