如何在一段时间内将不同的颜色应用于背景

Question

我有一个对象，具有交付时间属性，所以类似于myObject.deliveryTime。当current time - myObject.deliveryTime < 4 hours时，我想在current time - myObject.deliveryTime == 4 hours时将背景设置为黄色(#ffc107)，然后将实时渐变为(#dc3545)作为current time - myObject.deliveryTime == 0 hours。

如何使十六进制作为时间的函数发生变化，并保持它不受两个颜色值的限制？

我希望在4小时内看到的颜色渐变：https://coolors.co/gradient-maker/dc3545-ffc107

编辑：
下面是我努力实现的目标的一个例子
https://jsfiddle.net/f9b9sbr4/1/
然而，jsfiddle从较深的蓝色变为较浅的蓝色。

Answer 1

您可以通过两个选项来实现。

选项1

ngStyle:使用

<div [ngStyle]="{'background-color': (current_time - myObject.deliveryTime < 4) ? 
'#ffc107' : (current_time - myObject.deliveryTime == 4) ? '#dc3545' : 'green'}">
You content
</div>

选项2

根据您的颜色组合声明类：

.default-bg{
background-color: #bfbfbf;
}
.red-bg{
background-color: #dc3545;
}
.yellow-bg{
background-color: #ffc107;
}
.green-bg{
background-color: green;
}

通过ngClass:在你的html中使用它

<p class="default-bg" [ngClass]="{'yellow-bg': current_time - 
myObject.deliveryTime < 4,
'red-bg': current_time - myObject.deliveryTime == 4,
'green-bg': current_time - myObject.deliveryTime > 4}">
Your content
</p>