Я просмотрел: Программно осветлить или затемнить шестнадцатеричный цвет (или rgb и смешать цвета) , а более конкретно: https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js), чтобы попытаться реализовать аналогичное изменение цвета длямоя программа.
Проблема, по-моему, заключается в том, что когда я сохраняю полученные значения rgb из моей функции newRGB в переменной с именем c и использую значение из c для реализации в моей холодной функции, изменение цветане происходит
Я могу сохранить массив convertRGB и увидеть значения 100 rgb в консоли, но не могу использовать эти 100 значений для замены значения цвета для моей функции cold ().
Цель: когда пользователь увеличивает значение в браузере, результирующий цвет фона всех трех полей ввода должен либо становиться более красным (увеличиваться до полного красного, начиная с черного с середины точки между 0 и 100).для градуса Цельсия и наоборот при уменьшении.
В основном, от 50 до 100 ° С, цвет цветного фона должен начинаться с полностью черного и становиться полностью красным. А с 50 до 0 С цветовой фон должен переходить отот полного черного до полного синего.
Примечание. Значения 100 rgb, которые я вычислил в консоли, меняются от голубоватого до белого.
const celciusInput_input = document.querySelector('#celcius > input');
const farenheitInput_input = document.querySelector('#farenheit > input');
const kelvinInput_input = document.querySelector('#kelvin > input');
function roundNum(num) {
return Math.round(num * 100) / 100; //round to 100th place (where num is any float number)
}
const pSBC = function (p, from, to) {
if (typeof (p) != "number" || p < -1 || p > 1 || typeof (from) != "string" || (from[0] != 'r' && from[0] != '#') || (to && typeof (to) != "string")) return null; //ErrorCheck
if (!this.pSBCr) this.pSBCr = (d) => {
let l = d.length,
RGB = {};
if (l > 9) {
d = d.split(",");
if (d.length < 3 || d.length > 4) return null; //ErrorCheck
RGB[0] = i(d[0].split("(")[1]), RGB[1] = i(d[1]), RGB[2] = i(d[2]), RGB[3] = d[3] ? parseFloat(d[3]) : -1;
} else {
if (l == 8 || l == 6 || l < 4) return null; //ErrorCheck
if (l < 6) d = "#" + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (l > 4 ? d[4] + "" + d[4] : ""); //3 or 4 digit
d = i(d.slice(1), 16), RGB[0] = d >> 16 & 255, RGB[1] = d >> 8 & 255, RGB[2] = d & 255, RGB[3] = -1;
if (l == 9 || l == 5) RGB[3] = r((RGB[2] / 255) * 10000) / 10000, RGB[2] = RGB[1], RGB[1] = RGB[0], RGB[0] = d >> 24 & 255;
}
return RGB;
}
var i = parseInt,
r = Math.round,
h = from.length > 9,
h = typeof (to) == "string" ? to.length > 9 ? true : to == "c" ? !h : false : h,
b = p < 0,
p = b ? p * -1 : p,
to = to && to != "c" ? to : b ? "#000000" : "#FFFFFF",
f = this.pSBCr(from),
t = this.pSBCr(to);
if (!f || !t) return null; //ErrorCheck
if (h) return "rgb" + (f[3] > -1 || t[3] > -1 ? "a(" : "(") + r((t[0] - f[0]) * p + f[0]) + "," + r((t[1] - f[1]) * p + f[1]) + "," + r((t[2] - f[2]) * p + f[2]) + (f[3] < 0 && t[3] < 0 ? ")" : "," + (f[3] > -1 && t[3] > -1 ? r(((t[3] - f[3]) * p + f[3]) * 10000) / 10000 : t[3] < 0 ? f[3] : t[3]) + ")");
else return "#" + (0x100000000 + r((t[0] - f[0]) * p + f[0]) * 0x1000000 + r((t[1] - f[1]) * p + f[1]) * 0x10000 + r((t[2] - f[2]) * p + f[2]) * 0x100 + (f[3] > -1 && t[3] > -1 ? r(((t[3] - f[3]) * p + f[3]) * 255) : t[3] > -1 ? r(t[3] * 255) : f[3] > -1 ? r(f[3] * 255) : 255)).toString(16).slice(1, f[3] > -1 || t[3] > -1 ? undefined : -2);
}
let color1 = "rgb(153, 175, 255)";
let newRGB = function numChange() {
const convertedRGB = [];
for (let i = 0; i < 100; i++) {
let percentage = i / 100;
c = pSBC(percentage, color1);
convertedRGB.push(c);
}
return convertedRGB;
}
console.log(newRGB(100));
c = pSBC(newRGB(100), color1); // rgb(20,60,200) + [42% Lighter] => rgb(119,142,223)
function hot() {
farenheitInput_input.style.background = 'red';
celciusInput_input.style.background = 'red';
kelvinInput_input.style.background = 'red';
}
function cold() {
farenheitInput_input.style.background = '#89e3ff';
celciusInput_input.style.background = '#89e3ff';
kelvinInput_input.style.background = '#89e3ff';
}
function defaultColor() {
farenheitInput_input.style.background = 'black';
celciusInput_input.style.background = 'black';
kelvinInput_input.style.background = 'black';
}
function converterCtoFK() {
const cTemp = parseFloat(celciusInput_input.value);
const fTemp = (cTemp * (9 / 5) + 32);
const kTemp = (cTemp + 273.15);
farenheitInput_input.value = (roundNum(fTemp));
kelvinInput_input.value = roundNum(kTemp);
if (cTemp >= 100) {
hot();
} else if (cTemp <= 0) {
cold();
} else {
defaultColor();
}
}
function converterFtoCK() {
const fTemp = parseFloat(farenheitInput_input.value);
const cTemp = ((fTemp - 32) * 5 / 9);
const kTemp = ((fTemp + 459.67) * 5 / 9);
celciusInput_input.value = roundNum(cTemp);
kelvinInput_input.value = roundNum(kTemp);
if (fTemp >= 212) {
hot();
} else if (32 > fTemp) {
cold();
} else {
defaultColor();
}
}
function converterKtoCF() {
const kTemp = parseFloat(kelvinInput_input.value);
const cTemp = (kTemp - 273.5);
const fTemp = (9 / 5 * (kTemp - 273) + 32);
celciusInput_input.value = roundNum(cTemp);
farenheitInput_input.value = roundNum(fTemp);
if (kTemp >= 373.15) {
hot();
} else if (273.15 > kTemp) {
cold();
} else {
defaultColor();
}
}
function main() {
celciusInput_input.addEventListener('input', converterCtoFK);
farenheitInput_input.addEventListener('input', converterFtoCK)
kelvinInput_input.addEventListener('input', converterKtoCF)
}
main();
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: black;
}
div {
height: 33.3vh;
}
#farenheit {
border-top: 4px solid white;
border-bottom: 4px solid white;
}
input[type=number] {
width: 100%;
height: 100%;
background: black;
outline: none;
color: white;
font-size: 10em;
text-align: center;
border: 0;
font-family: avenir, sans-serif;
}
/*browser support for chrome/ safari & opera*/
::-webkit-input-placeholder {
color: #222222;
}
h1{
color:#ff0000;
}
<!DOCTYPE html>
<html>
<head>
<title>Temperature Converter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrap">
<div id="celcius">
<input type="number" placeholder="celcius...">
</div>
<div id="farenheit">
<input type="number" placeholder="farenheit...">
</div>
<div id="kelvin">
<input type="number" placeholder="kelvin...">
</div>
</div>
<script src="app.js"></script>
</body>
</html>