HTML5 새로운 레이블 진행률 표시 줄 레이블, 사용자가 현재 상태를 이해하고 만족도를 높이기 위해 필요할 때 진행률 표시 줄을 사용할 수 있으며, 후속 조치에서 점점 더 재미있는 진행률 표시 줄이 제공됩니다!
이 기사는 순수 네이티브 DOM만을 사용하는 진행률 표시 줄입니다. 물론 프로젝트에 Jquery를 도입하면 Jquery를 사용하여 구현할 수도 있습니다. 아래 코드는 다음과 같습니다.
html 부분
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress</title>
</head>
<body>
<div style="position: relative">
<progress value="0" max="100" id="pro"></progress>
<span id="sp" style="color: orangered"></span>
</div>
</body>
</html>
Node.js 부분 :
let proObj = document.getElementById('pro')
const myTimer = setInterval(() => {
if (proObj.value < 100) {
proObj.value += 1
const spanobj = document.getElementById("sp")
spanobj.innerHTML = proObj.value + '%'
// 参数3为 width/ max的值，这样就可以让百分比数字跟随进度条移动了
spanobj.style.left = proObj.value * 3 + "px"
} else {
alert('进度100%，下载完成！') // 在完成后可进行后续操作
clearInterval(myTimer)
}
}, 100)
CSS 스타일 부분 :
progress {
width: 300px;
height: 30px;
color: #f00;
background: #EFEFF4;
border-radius: 0.5rem;
position: absolute;
left: 0;
top: 0;
}
/* 1表示总长度背景色 */
progress::-webkit-progress-bar {
background-color: #f2f2f2;
border-radius: 0.5rem;
}
/* 2表示已完成进度背景色 */
progress::-webkit-progress-value {
background: lawngreen;
/*background-image: linear-gradient(to right, green , lawngreen);*/
border-radius: 0.5rem;
}
#sp {
position: absolute;
left: 0;
top: 0;
line-height: 30px;
}
실현 된 렌더링 :
