typescript 根据接口数值改变div背景色
时间: 2023-10-07 16:12:36 浏览: 49
可以按照以下步骤实现:
1. 定义一个接口,包含需要显示的数值和对应的颜色值:
```typescript
interface ColorMap {
value: number;
color: string;
}
```
2. 声明一个变量来存储显示的数值:
```typescript
let value: number = 0;
```
3. 定义一个函数,根据数值更新 div 的背景色:
```typescript
function updateDivColor(value: number, colorMap: ColorMap[]) {
const div = document.getElementById('myDiv');
if (div) {
for (let i = 0; i < colorMap.length; i++) {
if (value <= colorMap[i].value) {
div.style.backgroundColor = colorMap[i].color;
break;
}
}
}
}
```
4. 在 HTML 中创建一个 div,并给它一个 ID:
```html
<div id="myDiv">Hello, TypeScript!</div>
```
5. 在代码中调用 updateDivColor 函数,传入当前的数值和颜色映射表:
```typescript
const colorMap: ColorMap[] = [
{ value: 0, color: 'white' },
{ value: 25, color: 'green' },
{ value: 50, color: 'yellow' },
{ value: 75, color: 'orange' },
{ value: 100, color: 'red' },
];
// 更新数值并更新 div 背景色
value = 60;
updateDivColor(value, colorMap);
```
这样就可以根据数值的大小改变 div 的背景色了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)