Как изменить прозрачность фона со временем?
Я хочу изменить прозрачность фона в div в зависимости от времени.
Я буду использовать css rgba. например, 12 часов дня самое яркое (rgba(0, 0, 0, 0)), а 12 часов самое темное (rgba(0, 0, 0, 1))
и я нашел этот скрипт и пытаюсь изменить. но он меняет цвет, и нет опции непрозрачности.
Как я могу изменить этот код?
Мне действительно нужна твоя помощь. Спасибо.
function time() {
var today = new Date();
var h = today.getHours()
if (h > 12) {
h = h - "12"
};
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clocky').innerHTML = h + ":" + m + ":" + s;
var r = parseInt(s) * 1;
var g = parseInt(s) * 3;
var b = parseInt(s) * 5;
document.body.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
var t = setTimeout(time, 500);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i
};
return i;
}
time();
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Нет свойства css для непрозрачности фона
Вы можете изменить непрозрачность элемента следующим образом:
document.getElementById('my_id').style.opacity = some_values
function changeOpacity() {
var today = new Date();
var s = parseInt(today.getSeconds());
var opacity = getOpacity(s);
console.info(opacity)
document.getElementById('my_div').style.backgroundColor = "rgba(0, 0, 0," + opacity + ")";
var t = setTimeout(changeOpacity, 500);
}
function getOpacity(s) {
var x = 10; // You can change this to adjust the speed of change in opacity
s = s % (2 * x);
if (s > x) {
return (2 * x - s) / x;
}
return s / x;
}
changeOpacity();#my_div {
color: white;
}<div id = "my_div">
<p>Hilo</p>
</div>Что вы подразумеваете под «Я хочу, чтобы цвет фона работал как часы»? Вы хотите изменить непрозрачность цвета фона, не влияя на прозрачность текста?
Да, Алтин, поэтому я планирую использовать background-color:rgba(0,0,0,0.1). например, 12 часов дня — это 0,0,0,0,1 / 13:00 — это 0,0,0,1,83 / ... / 12 часов ночи — это 0,0,0,0.
поэтому я изменил ваш скрипт «getSeconds» на «getHours» и «.style.backgroundColor». а то не знаю как быть..
Я изменил свой ответ. Вам это помогает?
большое спасибо! это то, что я хотел. очень помог мне Алтин. но у меня есть один вопрос. Когда непрозрачность от 0 до 1, могу ли я изменить ее с 1 на 0,9 вместо того, чтобы вернуться к 1?
Я отредактировал свой ответ, я думаю, что это решит вашу проблему, если это так, пожалуйста, примите мой ответ, иначе скажите мне, если что-то не так. P.S. - Как я упоминал в комментарии к javascript, вы можете изменить значение x, чтобы настроить скорость изменения непрозрачности.
Давайте продолжим обсуждение в чате.
Конечно, поэтому опция rgba даст вам возможность изменить непрозрачность. Кроме того, вы можете использовать непрозрачность для изменения непрозрачности.
document.element.style.opacity = 0.5
В свой код вы можете добавить эти две строки:
var a = parseInt(s) * 24
document.body.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' +
a ')'; //this last parameter 'a' will change the opacity.
Чтобы получить значение, попадающее между двумя значениями (например, часы), полезно использовать значение косинуса. Значение косинуса меняется от -1 до 1 d. Затем непрозрачность будет изменена с -1 на 1.
Значение непрозрачности изменяется от 0 до 1. И значение косинуса изменяется от 0 до 1 при делении PI на 2. Таким образом, если значение cos изменяется при делении PI на 2, то значение может быть изменено от 1 до 0 и от 0 до -1 и от от -1 до 0 и так далее. Но нужно только от 0 до 1, поэтому Math.abs() получит абсолютное значение.
С cos можно использовать значение дня. Таким образом, дневное значение может идти со значением cos. Затем день может перейти от -2 PI к 0, как на графике cos. Продолжительность дня равна PI, деленному на 2. Наконец, значение, используемое в качестве значения непрозрачности.
Поскольку console.info показывает изменения значения от -1 до 1, непрозрачность также будет изменена. Вы не можете видеть изменения непрозрачности, потому что значение непрозрачности меняется очень медленно, но меняется.
function time(){
var today = new Date();
var h = today.getHours()
if (h>12) {h= h- "12"} ;
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
var sec = 1000;
var min = 60 * sec;
var hour = min * 60;
var day = hour * 24
var todaySec = today.getSeconds();
var todayMin = today.getMinutes() * sec;
var todayHour = today.getHours() * hour;
var todayValue = todaySec + todayMin + todayHour;
// this value change from 0 to (3.14 / 2) but time of changes of the value is too long to wait
var dayValueChange = todayValue/day * Math.PI / 2
// this cosine value will be change from 1 to 0 and from 0 to 1 only
var cosValue = Math.abs(Math.cos(dayValueChange));
console.info(cosValue)
document.getElementById('clocky').innerHTML = h + ":" + m + ":" + s;
var r = parseInt(s) * 1;
var g = parseInt(s) * 3;
var b = parseInt(s) * 5;
// rgb values are just example
document.body.style.backgroundColor = 'rgb(84, 86, 171,' + cosValue + ')';
var t = setTimeout(time, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
time();<div id='clocky'></div>
спасибо за ваш код. но я хочу, чтобы цвет фона работал как часы...