javascript - 如何随时间改变背景不透明度？

Question

我想根据时间更改 div 的背景不透明度。

我将使用 css 的 rgba。例如下午 12 点是最亮的(rgba(0, 0, 0, 0))，上午 12 点是最暗的(rgba(0, 0, 0, 1))

我找到了这个脚本并尝试修改。但它会改变颜色并且没有不透明度选项。

如何更改此代码？

我真的需要你的帮助。谢谢。

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

Answer 1

背景不透明度没有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.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>