学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪\ 如果大家喜欢，可以点赞或留言💕~~，谢谢大家⭐️⭐️⭐️~~
手写个进度条，说下自己遇到的问题，第一次的思路是只通过before和after样式写出来，实现进度条，但是发现有个bug就是当达到90多以上，after右上三角颜色就不对了，颜色有出入，无法实现，接下来就想到了第二种方案，在mybar里边分别放两个div 一个渐变的横柱和一个小三角这样，然后依旧通过mybar去控制进度就这样完美解决，具体思路看代码就了解了，看代码吧
效果图如下：
代码块
https://code.juejin.cn/pen/7089315525653692429
代码介绍：
Html部分
<div class="ProgressBox" style="width: 500px;">
<!-- 外层的渐变框-->
<div style="background: linear-gradient(to right,#022F6D,#214879);padding: 10px 30px 10px 0 !important;">
<!-- 横柱斜三角底框-->
<div id="myProgress" class="myProgress">
<!-- 横柱斜三角整体-->
<div id="myBar" class="myBar">
<!-- 渐变横柱 -->
<div class="myBara1"></div>
<!-- 渐变横柱右侧小三角 -->
<div class="myBara2"></div>
</div>
<span id="baifen" class="baifen">0%</span>
</div>
</div>
</div>
Css部分
/* 进度条 */
.myProgress {
position: relative;
width: 100%;
height: 16px;
text-align: center;
line-height: 100px;
background: #052D55;
padding-right: 3% !important;
}
.myProgress:before {
display: block;
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 16px solid #052D55;
border-top: 16px solid rgb(33, 72, 121);
right: 0;
top: 0;
background: transparent;
}
.myProgress:after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-right: 16px solid transparent;
border-top: 16px solid transparent;
right: 0;
top: 0;
background: transparent;
}
.myBar {
position: relative;
width: 100%;
height: 16px;
text-align: center;
line-height: 100px;
background: linear-gradient(to right, rgba(114, 138, 255, 1), rgba(26, 186, 255, 1));
}
/*.myBar:before {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-left: 16px solid transparent;
border-top: 16px solid #052D55;
background: transparent;
}
.myBar:after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-right: 16px solid transparent;
border-top: 16px solid transparent;
right: 0;
top: 0;
background: transparent;
}*/
.baifen {
position: absolute;
top: -42px;
right: -88px;
font-size: 30px;
font-family: DS-Digital;
font-weight: bold;
background: linear-gradient(0deg, #00D8BF 0%, #009CD6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.myBara1 {
display: inline-block;
width: 100%;
height: 16px;
background-color: pink;
position: absolute;
left: 0;
background: linear-gradient(to right, rgba(114, 138, 255, 1), rgba(26, 186, 255, 1));
}
.myBara2 {
top: 0;
right: 0;
width: 0;
height: 0;
display: inline-block;
border-bottom: 16px solid #1ABAFF;
border-right: 16px solid transparent;
position: absolute;
right: -16px;
}
Js部分
width设置默认初始值为0；curN是当前值要显示的百分比数值；total是总数
// 进度条
move() {
var elem = document.getElementById("myBar");
var baifen = document.getElementById("baifen");
var width = 0;//初始值默认0
var curN = 80;//当前值
var total = 100; //总数
var id = setInterval(frame, 10);
function frame() {
elem.style.width = width + '%';
width++;
if (width >= curN) {
clearInterval(id);
} else {
width++;
elem.style.width = ((width / total) * 100) + '%';
baifen.innerHTML = width * 1 + '%';
}
}
//改进一版
function frame() {
elem.style.width = width + '%';
baifen.innerHTML = width * 1 + '%';
width++;
if (curN == width) {
elem.style.width = width + '%';
baifen.innerHTML = width * 1 + '%';
} else if (width > curN) {
clearInterval(id);
} else {
width++;
elem.style.width = ((width / total) * 100) + '%';
baifen.innerHTML = width * 1 + '%';
}
}
},
具体效果可以直接复制代码到本地看，样式颜色可以微调成自己想要的哦💕💕~ 欢迎阅读点赞⭐️⭐️⭐️
