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

yjdev 发表于 Dev

dev

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

我将使用CSS的rgba。例如12pm是最亮的（rgba(0, 0, 0, 0)），而12am是最暗的（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();

阿廷

没有背景透明度的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();