Как постоянно поменять коробку на случайные цвета - PullRequest
Новая
       5

Как постоянно поменять коробку на случайные цвета

0 голосов
/ 29 августа 2018

Я экспериментирую с функциями setInterval и setTimeout, меняя цвет фона div.

То, чего я пытаюсь достичь, это то, что я хотел бы, чтобы окно менялось на случайные цвета непрерывно . У меня также есть функция, с помощью которой я могу помешать коробке менять цвет, щелкнув ее. 

var colorChanger = document.getElementById("colour-changer");
var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);

function changeColor(){

  colorChanger.style.backgroundColor =  "rgb("+r+","+g+","+b+")";

}

var myTimer = setInterval(changeColor, 3000);
var running = true;

colorChanger.onclick = function(){

  if(running) {
    clearInterval(myTimer);
    colorChanger.innerHTML = "Timer stopped";
    running = false;
  } else {
    myTimer = setInterval(changeColor, 3000);
    colorChanger.innerHTML = "";
    running = true;
  }
 
};
#colour-changer {
  width:200px;
  height:100px;
  margin:30px auto;
  background-color:#fff;

  -webkit-transition:background-color 0.7s;
  -moz-transition: background-color 0.7s;
  transition:background-color 0.7s;
}
  <div id="colour-changer"></div>

Почему это не меняет случайные цвета непрерывно?

Ответы [ 3 ]

0 голосов
/ 29 августа 2018 
 // Generate A Random Color
function randomColor () {
  var red   = (Math.floor(Math.random() * 256));
  var green = (Math.floor(Math.random() * 256));
  var blue  = (Math.floor(Math.random() * 256)); 
  return 'rgb(' + red + ',' + green + ',' + blue +')';
}

$(document).ready(function () {
   setInterval(function() {
     var color = randomColor();
     $('body').css('background-color', color);
   }, 4000); // end of setInterval 
}

P.S: Обратите внимание, я использую jQuery для демонстрационных целей.

0 голосов
/ 29 августа 2018

Вы были довольно близко. Просто вы устанавливаете цвета случайным образом только один раз. Если вы перемещаете генерацию случайных цветов внутри changeColor, вы увидите, что цвета меняются на каждом интервале. Еще одна вещь, которую вы можете рассмотреть для «непрерывного» изменения, это установить интервал на время вашей анимации. Сейчас он установлен на 3000, что составляет 3 секунды, а ваша анимация установлена ​​на 0,7 с. Таким образом, использование 700 (0,7 с) в интервале сделает его непрерывным. 

var colorChanger = document.getElementById("colour-changer");
var r = Math.round(Math.random()*255);
var g = Math.round(Math.random()*255);
var b = Math.round(Math.random()*255);

function changeColor(){
    r = Math.round(Math.random()*255);
    g = Math.round(Math.random()*255);
    b = Math.round(Math.random()*255);

  colorChanger.style.backgroundColor =  "rgb("+r+","+g+","+b+")";

}

var myTimer = setInterval(changeColor, 700);
var running = true;

colorChanger.onclick = function(){

  if(running) {
    clearInterval(myTimer);
    colorChanger.innerHTML = "Timer stopped";
    running = false;
  } else {
    myTimer = setInterval(changeColor, 700);
    colorChanger.innerHTML = "";
    running = true;
  }
 
};
#colour-changer {
  width:200px;
  height:100px;
  margin:30px auto;
  background-color:#fff;

  -webkit-transition:background-color 0.7s;
  -moz-transition: background-color 0.7s;
  transition:background-color 0.7s;
}
  <div id="colour-changer"></div>
0 голосов
/ 29 августа 2018

Вам просто нужно сгенерировать случайные rgb s внутри changeColor. Обратите внимание, что вам, вероятно, следует использовать Math.floor вместо Math.round для правильного вывода, и вы можете сделать свой код DRY-er, вызвав функцию, которая возвращает случайное число: 

var colorChanger = document.getElementById("colour-changer");

const randNum = () => Math.floor(Math.random()*256);

function changeColor(){
  colorChanger.style.backgroundColor =  `rgb(${randNum()},${randNum()},${randNum()})`;
}

var myTimer = setInterval(changeColor, 3000);
var running = true;

colorChanger.onclick = function(){

  if(running) {
    clearInterval(myTimer);
    colorChanger.innerHTML = "Timer stopped";
    running = false;
  } else {
    myTimer = setInterval(changeColor, 3000);
    colorChanger.innerHTML = "";
    running = true;
  }
 
};
#colour-changer {
  width:200px;
  height:100px;
  margin:30px auto;
  background-color:#fff;

  -webkit-transition:background-color 0.7s;
  -moz-transition: background-color 0.7s;
  transition:background-color 0.7s;
}
<div id="colour-changer"></div>
...