设计一个 模块进度信号灯
时间: 2023-08-12 12:06:07 浏览: 37
好的,这里是一种设计模块进度信号灯的思路:
HTML:
```
<div class="module-progress">
<div class="progress-light">
<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>
</div>
<div class="progress-text">Module Progress: <span class="percent">0</span>%</div>
</div>
```
CSS:
```
.module-progress {
display: flex;
align-items: center;
}
.progress-light {
display: flex;
margin-right: 20px;
}
.light {
width: 10px;
height: 10px;
margin-right: 5px;
border-radius: 50%;
background-color: #ccc;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
.progress-text {
font-size: 14px;
}
.percent {
font-weight: bold;
}
```
JavaScript:
```
function updateModuleProgress(percent) {
$('.percent').text(percent);
var $lights = $('.light');
if (percent < 33) {
$lights.removeClass('yellow green').addClass('red');
} else if (percent >= 33 && percent < 66) {
$lights.removeClass('red green').addClass('yellow');
} else {
$lights.removeClass('red yellow').addClass('green');
}
}
updateModuleProgress(50);
```
这个模块包括一个信号灯和一个文本,信号灯可以根据模块的进度显示不同的颜色,文本显示当前的进度百分比。JavaScript代码中的`updateModuleProgress`函数可以根据具体的需求来更新进度信号灯的状态。你可以根据具体的设计要求来自由设置进度信号灯模块的样式和功能。