Почему предыдущий цвет фона записан в переменной C? - PullRequest
Новая
       10

Почему предыдущий цвет фона записан в переменной C?

0 голосов
/ 07 мая 2018

Я хочу создать приложение, которое будет выводить случайный цвет.Но цветовой код выводится предыдущим.Почему предыдущий цвет фона записан в переменной C?Помогите плз.Мой английский такой плохой, сри.Я только начал изучать jquery. 

function getNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getColor(n) {
  $(".color" + n).css(
    "background-color",
    "rgb(" + getNum(0, 255) + "," + getNum(0, 255) + "," + getNum(0, 255) + ")"
  );
  var c = $(".color" + n).css("backgroundColor");
  $(".color" + n).text(c)
};

$("#randcolor").click(function() {
  getColor(1);
  getColor(2);
  getColor(3);
});

$(document).ready(function() {
  getColor(1);
  getColor(2);
  getColor(3);
});
*{text-align:center}
.color{
  display: inline-block;
  border-radius: 10px;
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: #fff;
  text-shadow: 0 5px 10px rgba(0,0,0,.8);
  box-shadow: 0 5px 10px rgba(0,0,0,.5);
  margin: 20px;
  transition: ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="randcolor">Give random color</button> <br>
<div class="color1 color"></div>
<div class="color2 color"></div>
<div class="color3 color"></div>

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

Причина довольно проста: у вас включены CSS-переходы, поэтому цвет фона требует времени для перехода к следующему цвету. Этот переход происходит асинхронно, но вы читаете цвет фона сразу после его установки, когда цвет фона не полностью изменился. Метод .css() использует window.getComputedStyle(), что означает, что он получает любой цвет фона, в котором находится элемент, независимо от его переходного состояния.

Что я могу предложить, так это то, что вы просто генерируете цвет и сохраняете его в переменной, а затем используете его для установки .css() и .text() согласно моему комментарию. Таким образом, вы также можете использовать преимущества цепочки в jQuery: 

var backgroundColor = "rgb(" + getNum(0, 255) + "," + getNum(0, 255) + "," + getNum(0, 255) + ")";
$(".color" + n)
    .css("background-color", backgroundColor)
    .text(backgroundColor);

См. Подтверждение концепции ниже: 

function getNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getColor(n) {
  var backgroundColor = "rgb(" + getNum(0, 255) + "," + getNum(0, 255) + "," + getNum(0, 255) + ")";
  $(".color" + n).css(
    "background-color",
    backgroundColor
  ).text(backgroundColor);
};

$("#randcolor").click(function() {
  getColor(1);
  getColor(2);
  getColor(3);
});

$(document).ready(function() {
  getColor(1);
  getColor(2);
  getColor(3);
});
*{text-align:center}
.color{
  display: inline-block;
  border-radius: 10px;
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: #fff;
  text-shadow: 0 5px 10px rgba(0,0,0,.8);
  box-shadow: 0 5px 10px rgba(0,0,0,.5);
  margin: 20px;
  transition: ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="randcolor">Give random color</button> <br>
<div class="color1 color"></div>
<div class="color2 color"></div>
<div class="color3 color"></div>
0 голосов
/ 07 мая 2018

Редактировать: Рефакторинг для добавленного волшебства, включая предложение цепочки метода Терри jQuery: 

function getNum(str, char) {
  return str + Math.floor(Math.random() * 257) + char;
}

function getColor() {
  var color = "rgb" + [..."(,,)"].reduce(getNum);
  $(this).css("background-color", color).text(color);
};

function changeColors() {
  $.each($(".color"), getColor);
}

$("#randcolor").click(changeColors);

$(document).ready(changeColors);
*{text-align:center}
.color{
  display: inline-block;
  border-radius: 10px;
  width: 200px;
  height: 200px;
  line-height: 200px;
  color: #fff;
  text-shadow: 0 5px 10px rgba(0,0,0,.8);
  box-shadow: 0 5px 10px rgba(0,0,0,.5);
  margin: 20px;
  transition: ease .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="randcolor">Give random color</button> <br>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
...