Привет! Нужна помощь по доработке кода js. Сам не справлюсь...
Снизу написан код. Он позволяет вывести средний цвет между двумя имеющимися color1 и color2.В конце скрипта вводится значение color1 и color2, а также percent, которое определяет, на сколько будет близок средний цвет к color1 или color2. Сейчас percent - это число от 1 до 100.
Задача: Сделать автоматическую и последовательную подстановку значений в percent, от 1 до 100 и обратно, чтобы получился плавный градиент от color1 к color2.
<div id="content" style="width:200px; height:100px; border-radius:10px;">
Thank you friend!
</div>
<script>
function makeGradientColor(color1, color2, percent) {
var newColor = {};
function makeChannel(a, b) {
return(a + Math.round((b-a)*(percent/100)));
}
function makeColorPiece(num) {
num = Math.min(num, 255); // not more than 255
num = Math.max(num, 0); // not less than 0
var str = num.toString(16);
if (str.length < 2) {
str = "0" + str;
}
return(str);
}
newColor.r = makeChannel(color1.r, color2.r);
newColor.g = makeChannel(color1.g, color2.g);
newColor.b = makeChannel(color1.b, color2.b);
newColor.cssColor = "#" + makeColorPiece(newColor.r) + makeColorPiece(newColor.g) + makeColorPiece(newColor.b);
return(newColor);
}
var yellow = {r:255, g:255, b:0};
var blue = {r:0, g:0, b:255};
var newColor = makeGradientColor(yellow, blue, 12);
document.getElementById('content').style.backgroundColor = newColor.cssColor;
</script>
