Стиль JavaScript. Фон-цвет
У меня вопрос о моем коде, где я пытаюсь создать динамический фон с помощью веб-камеры, которая с помощью .jquery дает значение lightIntensity в количестве 0-255, которое я хотел бы использовать для фона, я я не могу заставить его работать.
$(document).ready(function() {
$.fn.webcamLightSensor({ refreshInterval: 100 }, function(lightIntensity) {
$('.container p').text(lightIntensity);
console.info(lightIntensity)
});
function decimalToHex(lightIntensity) {
var hex = Number(lightIntensity).toString(16);
hex = "000000".substr(0, 6 - hex.length) + hex;
return hex;
document.body.style.backgroundColor = hex;
}
});
'lightIntenisty' - это число от 0 до 255, которое нужно преобразовать в RGB или шестнадцатеричный (я думаю).
Код использует библиотеку jQuery:
- jquery-1.9.1.js
- jquery.image-яркость.js
- jquery.webcam-light-sensor.js
<script src = "https://github.com/ErwynIzaaekJoziasse/js/blob/master/jquery.webcam-light-sensor.js"></script>
<script src = "https://github.com/ErwynIzaaekJoziasse/js/blob/master/jquery.image-brightness.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Light -> colour</title>
<script src = "js/jquery-1.9.1.js" ></script>
<script src = "js/jquery.image-brightness.js" ></script>
<script src = "js/jquery.webcam-light-sensor.js" ></script>
</head>
<body>
<div>
<div class = "container">
<!-- in between the <p> the 'amount' of light is displayed (0/255) -->
<p></p>
</div>
</div>
<script>
$(document).ready(function() {
$.fn.webcamLightSensor({ refreshInterval: 100 }, function(lightIntensity) {
$('.container p').text(lightIntensity);
console.info(lightIntensity)
});
function decimalToHex(lightIntensity) {
var hex = Number(lightIntensity).toString(16);
hex = "000000".substr(0, 6 - hex.length) + hex;
document.body.style.backgroundColor = '#' + hex;
return hex;
}
});
</script>
</body>
</html>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы возвращаетесь до того, как установите backgroundColor, поэтому он никогда не достигает.
function newColor() {
decimalToHex(Math.floor((Math.random() * 16777215) + 1));
}
function decimalToHex(lightIntensity) {
var hex = Number(lightIntensity).toString(16);
hex = "000000".substr(0, 6 - hex.length) + hex;
document.body.style.backgroundColor = '#' + hex;
console.info(hex);
return hex;
}html, body {
width: 100%;
height: 100%;
}<button onclick = "newColor()">Change</button>Я просто использовал это в консоли на этой странице и передавал значения. Фон меняет цвета.
Может быть, в моем коде есть что-то, что мешает этому изменяться при загрузке веб-страницы?
В опубликованном вами коде вы не выполняете эту функцию.
Я бы взял код из https://jqueryui.com/slider/#colorpicker
function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
}
Это, конечно, требует значений красного, зеленого и синего цветов. Вы получаете только 1 значение от 0 до 255. Так что не уверен, как вы получите из этого "цвет".
В вашем примере кода также нет ничего, что запускало бы это. Я бы настроил обратный вызов, а затем назначил бы шестнадцатеричное значение на основе этого события.
$.fn.webcamLightSensor({ refreshInterval: 100 }, function(lightIntensity) {
$('.container p').text(lightIntensity);
console.info(lightIntensity);
$("body").css("background", "#" + hexFromRGB(lightIntensity, lightIntensity, lightIntensity));
});
Надеюсь, это поможет.
похоже, это работает! Спасибо! есть идеи, как я могу изменить шкалу серого на какой-то цвет?
Я не совсем знаком с этой библиотекой веб-камеры. Вам потребуется 3 значения: одно для красного, одно для зеленого и одно для синего. Каждый будет от 0 до 255.
$ ("тело"). css ("фон", "#" + hexFromRGB (0, 0, lightIntensity)); создает цвет между черным и синим, есть ли способ сделать 0-lightIntensity, 0, 0 + lightIntensity, чтобы создать цвет между красным и синим?
@ErwynJoziasse Конечно: $("body").css("background", "#" + hexFromRGB((255 - lightIntensity), 0, lightIntensity));
@ErwynJoziasse надеюсь, что это помогло, если да, надеюсь, вы захотите проголосовать за мой ответ. Если он ответил на ваш вопрос, надеюсь, вы тоже хотите отметить его как ответ.
с 1 значением вы не получите насыщенного цвета, но попробуйте это
function decimalToHex(i) {
var hex = i.toString(16);
hex = hex.length == 1 ? "0" + hex : hex;
result = '#' + hex.repeat(3);
document.body.style.backgroundColor = result;
return result;
}
var num = 0;
$('button').on('click', function() {
if (num > 255) return
result = decimalToHex(num);
console.clear()
console.info(num, result)
num = num + 20;
})<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button>
Change background
</button>
Я думаю, это действительно должно работать, но моя страница кажется такой, что остается белой ... кажется, работает только console.info