Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Tạo màu ngẫu nhiên giữa #CCCCCC và #3B5998 cho color meter bằng JavaScript

Chúng ta cần viết hàm tạo màu ngẫu nhiên giữa hai màu cho trước. Giải quyết theo các bước:

  • Thứ nhất: Viết hàm tạo số ngẫu nhiên giữa hai số.
  • Thứ hai: Thay vì dùng thang hex, ánh xạ hex sang thang thập phân 0-15 và dùng thang đó.
  • Thứ ba: Lặp qua chuỗi màu cho trước và tạo màu ngẫu nhiên.

Ví dụ

const randomBetween = (a, b) => {
  const max = Math.max(a, b);
  const min = Math.min(a, b);
  return Math.floor(Math.random() * (max - min) + min);
};

const randomColor = (firstColor, secondColor) => {
  first = firstColor.toUpperCase().substring(1, secondColor.length);
  second = secondColor.toUpperCase().substring(1, firstColor.length);
  const scale = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < first.length && i < second.length; i++) {
    const random = randomBetween(scale.indexOf(first[i]), scale.indexOf(second[i]));
    color += scale[random];
  }
  return color;
};

console.log(randomColor('#34324a', '#42342c'));
console.log(randomColor('#f43250', '#12342c'));
console.log(randomColor('#34324a', '#47942c'));
console.log(randomColor('#ffffff', '#000000'));

Đầu ra có thể (ngẫu nhiên mỗi lần):

Kết quả

#33332A #C23328 #36822B #35102A