预期目标：
根据WiFi信号强度，绘制信号格，满格100，80格以上为好，40格以上为中，其余为差。根据信号级别展示不同的颜色。 实现效果：
代码实现如下：
css部分：
<style>
// 定义css变量，实现作用域内css样式的变化
.line:nth-of-type(n) {
--percent: '1%';
--to-percent: '2%';
--line-color: #aaa;
--line-width: '0%';
}
.line {
margin: 20px auto;
position: relative;
width: 600px;
height: 50px;
background: repeating-linear-gradient(to right,
#aaa, #aaa 1%,
#fff 1%, #fff 2%
);
}
.signal {
margin: auto;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: var(--line-width);
background: repeating-linear-gradient(to right,
var(--line-color), var(--line-color) var(--percent),
#fff var(--percent), #fff var(--to-percent)
);
}
</style>
javascript部分：
<script>
window.onload = function() {
for (let i = 0; i < 10; i++) {
const body = document.querySelector('body');
let lineDiv = document.createElement('div');
lineDiv.setAttribute('class', 'line');
let signalDiv = document.createElement('div');
signalDiv.setAttribute('class', 'signal');
lineDiv.appendChild(signalDiv);
body.appendChild(lineDiv);
const doStyle = document.querySelectorAll('.line')[i].style;
// 模拟信号强度数据
const signal = Math.floor(Math.random() * 100);
doStyle.setProperty('--line-color', getColor(signal));
doStyle.setProperty('--line-width', (signal / 100) * 100 + '%');
doStyle.setProperty('--percent', (100 / signal) + '%');
doStyle.setProperty('--to-percent', 2 * (100 / signal) + '%');
}
}
function getColor(signal) {
if (signal > 0 && signal < 40) {
return 'red';
}
if (signal >= 40 && signal < 80) {
return 'yellow';
}
if (signal >= 80) {
return 'green';
}
return '#aaa';
}
</script>
