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

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

我将使用css的rgba。例如，12pm是最亮的（

rgba（0,0,0,0）

），12am是最暗的（

rgba（0,0,0,1）

）

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

如何更改此代码

我真的需要你的帮助。多谢各位

函数时间（）{
var today=新日期（）；
var h=today.getHours（）
如果（h>12）{
h=h-“12”
};
var m=today.getMinutes（）；
var s=today.getSeconds（）；
m=检查时间（m）；
s=检查时间（s）；
document.getElementById（'clocky'）.innerHTML=h+“：“+m+”：“+s；
var r=parseInt（s）*1；
var g=parseInt（s）*3；
var b=解析整数*5；
document.body.style.backgroundColor='rgb（'+r+'、'+g+'、'+b+'）；
var t=设置超时（时间，500）；
}
功能检查时间（i）{
如果（i<10）{
i=“0”+i
};
返回i；
}
时间（）；

背景不透明度没有css属性

可以按如下方式更改元素的不透明度：

document.getElementById（'my_id'）。style.opacity=一些_值

函数changeOpacity（）{
var today=新日期（）；
var s=parseInt（today.getSeconds（））；
var opacity=getOpacity（s）；
console.log（不透明度）
document.getElementById（'my_div'）.style.backgroundColor=“rgba（0,0,0，“+opacity+”）；
var t=设置超时（不透明度，500）；
}
函数getOpacity（s）{
var x=10；//您可以更改此值以调整不透明度的更改速度
s=s%（2*x）；
如果（s>x）{
返回（2*x-s）/x；
}
返回s/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

不透明度值从0更改为1。余弦值从0变为1，PI除以2。因此，如果cos值随PI除以2而变化，那么该值可以从1变为0，从0变为-1，从-1变为0，依此类推。但是只需要从0到1，因此
Math.abs（）
将获得绝对值

使用cos，可以使用一天的值。因此，日值可以与cos值匹配。然后一天可以从-2pi变为0，就像cos图一样。一天的长度是π除以2。最后是用作不透明度值的值

当console.log显示值从-1到1的变化时，不透明度也将改变。您看不到不透明度的变化，因为不透明度值变化非常缓慢，但会发生变化


函数时间（）{
var today=新日期（）；
var h=today.getHours（）
如果（h>12）{h=h-“12”}；
var m=today.getMinutes（）；
var s=today.getSeconds（）；
m=检查时间（m）；
s=检查时间（s）；
var-sec=1000；
var最小值=60*秒；
var小时=分钟*60；
var日=小时*24
var todaySec=today.getSeconds（）；
var todayMin=today.getMinutes（）*秒；
var todayHour=today.getHours（）*hour；
var todayValue=今天秒+今天分钟+今天小时；
//该值从0更改为（3.14/2），但该值的更改时间太长，无法等待
var dayValueChange=todayValue/day*Math.PI/2
//此余弦值将从1更改为0，并且仅从0更改为1
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=解析整数*5；
//rgb值只是一个例子
document.body.style.backgroundColor='rgb（84,86,171，'+cosValue+'）；
var t=设置超时（时间，500）；
}
功能检查时间（i）{
如果（i<10）{i=“0”+i}；
返回i；
}
时间（）
谢谢您的代码。但是我希望背景色像时钟一样工作……你说的“我希望背景色像时钟一样工作”是什么意思？是否要在不影响文本不透明度的情况下更改背景色的不透明度？是的，Altin，因此我计划使用背景色：rgba（0,0,0,0.1）。比如12pm是0,0,0,0.1/1pm是0,0,0,1.83/…/上午12点是0,0,0,0。所以我把你的脚本“getSeconds”改为“getHours”，还有“.style.backgroundColor”。然后我不知道该怎么做我修改了我的答案。这对你有帮助吗？