CODEWITHSUNDEEP
javascripthtmlcss
yjdev
yjdev

Reputation: 87

How to change background opacity with time?

I want to change background opacity on div based on time.

I will use css's rgba. for example 12pm is the brightest(rgba(0, 0, 0, 0)) and 12am is the darkest(rgba(0, 0, 0, 1))

and I found this script and try to modify. but it changes color and there's no opacity option.

How can I change this code?

I really need your help. Thank you.

Here is the script

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();

Upvotes: 2

Views: 630

Answers (3)

atin
atin

Reputation: 893

There is no css property for background-opacity

You can change the opacity of an element like this:

document.getElementById('my_id').style.opacity = some_values


function changeOpacity() {
  var today = new Date();
  var s = parseInt(today.getSeconds());
  var opacity = getOpacity(s);
  console.log(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>

Upvotes: 3

jacobkim
jacobkim

Reputation: 1090

To get value getting between two values(like a clock), using cosine value is helpful. Cosine value changes from -1 to 1 d. Then opacity will be changed from -1 to 1.

The opacity value changes from 0 to 1. And cosine value change from 0 to 1 with PI divided 2. So if cos value changes with PI divided by 2 then the value can be changed from 1 to 0 and from 0 to -1 and from -1 to 0 and so on. But only needed from 0 to 1 so Math.abs() will get absolute value.

With cos value of a day can be used. So day value can go with cos value. Then a day can go from -2 PI to 0 like cos graph. A length of a day is PI divided by 2. Lastly the value used as opacity value.

As console.log shows changes of value from -1 to 1 the opacity will be changed too. You can't see the changes in opacity because the opacity value changes very slowly but it changes.

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.log(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>

Upvotes: 2

P.B.UDAY
P.B.UDAY

Reputation: 483

Sure, so the rgba option will give you the option to change opacity. Also, you can use opacity to change the opacity.

document.element.style.opacity = 0.5

In your code, you can add these two lines:

var a = parseInt(s) * 24
document.body.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + 
 a ')'; //this last parameter 'a' will change the opacity.

Upvotes: 2

Related Questions