标签：百分比 ba 进度条 fillContent 条子 02js let lis width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
li {
border: 1px dashed #ccc;
height: 30px;
font-size: 15px;
line-height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.box {
width: 450px;
padding: 10px;
margin: 30px auto;
border: 1px dashed red;
}
.progress {
position: relative;
display: block;
/* 条子长度 */
width: 160px;
height: 12px;
border: 1px solid #ccc;
background: #EDEDED;
}
li>div {
/* border: 1px solid #000; */
width: 250px;
height: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 12px;
}
.fillContent {
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 12px;
/* background-color: greenyellow; */
}
</style>
</head>
<body>
<div class="box">
<h4>你被“最美乡村女校长”感动了吗(必选)</h4>
<ul>
<li>很感动，她很美<div>
<div class="progress">
<div class="fillContent "></div>
</div>
<i>11</i>
</div>
</li>
<li>很感动，她很美<div>
<div class="progress">
<div class="fillContent "></div>
</div><i>11</i>
</div>
</li>
<li>没感觉，这样的事很多<div>
<div class="progress">
<div class="fillContent "></div>
</div><i>11</i>
</div>
</li>
<li>不感动，可能是炒作<div>
<div class="progress">
<div class="fillContent "></div>
</div><i>11</i>
</div>
</li>
</ul>
</div>
<script>
console.log(' 条子最长160，如需百分之百更改长度和数据，因数据没有压缩化');
let lis = [50, 80, 100, 160]; //给定静态数据读取 条子最长160，如需百分之百更改长度和数据，因数据没有压缩化
let progress = document.querySelectorAll(".progress");
let itag = document.querySelectorAll("i");
let fillContent = document.querySelectorAll(".fillContent");
let w = progress[1].clientWidth;
//设置后面百分比数值
for (let i = 0; i < progress.length; i++) {
//计算百分比显示在文本中
//(Math.round(num / total * 10000) / 100.00);
itag[i].innerHTML = (Math.round(lis[i] / w * 10000) / 100.00) + '%' + ' ' + lis[i];//只显示两位小数
}
//设置条子变长
for (let i = 0; i < lis.length; i++) {
//Math.round(lis[i] / w * 100) * (lis[i] / w)
fillContent[i].style.width = lis[i] + "px";//条子增加
//计算条子百分比
let ba = Math.round(lis[i] / w * 10000) / 100.00;
//判断条子颜色
if (ba >= 0 && ba <= 50) {
fillContent[i].style.backgroundColor = 'red';
}
if (ba > 50 && ba <= 70) {
fillContent[i].style.backgroundColor = 'pink';
}
if (ba > 70 && ba <= 90) {
fillContent[i].style.backgroundColor = 'green';
}
if (ba > 90) {
fillContent[i].style.backgroundColor = 'greenyellow';
}
//判断条子不能超出指定宽度
if (ba >= w) {
fillContent[i].style.width = w + "px";
}
}
</script>
</body>
</html>
标签：百分比,
ba,
进度条,
fillContent,
条子,
02js,
let,
lis,
width
From： https://www.cnblogs.com/daixiaoyang/p/16727650.html