Как получить цвет для нанесения по одному? (

Question

Как получить цвет для нанесения по одному? (

0

Я делаю все возможное, чтобы узнать это, но мне нужна помощь :). Заранее спасибо. Как я могу заставить кнопки менять цвет по одному? После того, как кнопка станет красной, а затем через 2 секунды оранжевая кнопка включается, затем через 4 с желтой кнопкой и так далее, пока все кнопки не станут новым цветом? Вот мой JS Fiddle

<div class="interactiveBox">
<button id="root" onclick="changeColor(this)" data-color="#ff0000"></button>
<button id="sacral" onclick="changeColor(this)" data-color="orange"></button>
<button id="solar" onclick="changeColor(this)" data-color="yellow"></button>
<button id="heart" onclick="changeColor(this)" data-color="green"></button>
<button id="throat" onclick="changeColor(this)" data-color="blue"></button>
<button id="third" onclick="changeColor(this)" data-color="purple"></button>
<button id="crown" onclick="changeColor(this)" data-color="white"></button>
</div>

<script type="text/javascript">
function changeColor(obj) {
//reset other buttons
 var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){      
        buttons[i].style.backgroundColor = "#000000" ;
    }
    obj.style.backgroundColor=obj.getAttribute('data-color');
    if(obj.id == "root"){
        setTimeout(changeAllcolors,2000);
    }
}
function changeAllcolors(){
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        var color = buttons[i].getAttribute('data-color');
        buttons[i].style.backgroundColor = color;
    }
}
</script>

Nikole 14 апр. 2014, в 02:43

Источник

Теги:

javascript

html

css

timer

2 ответа

0

Функция, вызываемая setTimeout, должна знать, какая кнопка только что была установлена, изменить цвет следующей, а затем снова вызвать себя, пока она не изменит все кнопки. Вы можете использовать NodeList, возвращаемый getElementsByTagName, например,

function changeAllcolors(){
  var buttons = document.getElementsByTagName("button");
  var i = 0;

  var changeNext = function (){
    if (++i < buttons.length) {
      buttons[i].style.backgroundColor = buttons[i].getAttribute('data-color');
      setTimeout(changeNext, 2000);
    }
  };
  changeNext();
}

Вы также должны сделать значение, возвращаемое setTimeout, доступным для changeColor, чтобы он мог вызвать clearTimeout, чтобы остановить изменение цвета. В настоящий момент они будут продолжать менять цвета и многократно нажимать на корень нескольких пинов. Таким образом, вы можете получить какое-то странное поведение, если кто-то много нажимает на множество кнопок.

RobG 13 апр. 2014, в 23:21

0

Оба ответа великолепны. Спасибо за помощь.
Nikole 14 апр. 2014, в 16:16

Ещё вопросы

Оба ответа великолепны. Спасибо за помощь.

TimSPQR · Accepted Answer · 2014-04-13T23-35-00.000Z

Здесь FIDDLE имеет несколько иной подход. Я не уверен, что у меня есть время точно так, как вы этого хотите, но вы можете легко его изменить.

JS

var timer;
var light = 1;

colorarray = new Array('red', 'blue', 'yellow', 'black', 'pink', 'green', 'chocolate', 'cyan');

function timedCount()
{
  timer = setTimeout(function(){timedCount()},500*light);
  $(".interactiveBox div:nth-child("+ light +")").css('background-color', colorarray[light]);
  light = light + 1;
  if(light>8)
  {
   light = 1;
   $('.interactiveBox div').css( 'background-color', 'white');
   }
}

$('.start').click(function(){
      timedCount();
});

$('.stop').click(function(){
      clearTimeout(timer);
});

Спасибо, что помогли мне понять. Это было очень полезно.