编写简单的动态进度条

需求描述

进入页面后动态生成进度条，并且展示百分比数字

实现方案

**通过transition和定时器等来完成这个功能
html

<div class="progress">
    <div class="progress_bar">
        <span class="progress_num"></span>
    </div>
    <!-- <div class="progress_bar">
        <span class="progress_num"></span>
    </div> -->
    
</div>

css

.progress {
  width: 300px;
   /* height: 100px; */
   /* padding-top: 20px; */
   padding: 20px 10px;
   /* background-color: rgba(0,0,0,.6); */
}
.progress_bar {
   width: 0;
   max-width: 100%;
   height: 20px;
   margin-bottom: 20px;
   background-color: #ccc;
   border-radius: 10px;
   text-align: right;
}
.progress_num {
   position: absolute;
}

js

window.onload = function () {
   const progressList = document.querySelectorAll('.progress_bar')
   const progressNums = document.querySelectorAll('.progress_num')
   const progressNum = 80
   progressList[0].style = `width: ${progressNum}%; transition: all 2s;`
   function countNumber () {
       progressNums[0].innerText = Number(progressList[0].innerText) + 1
   }
   const clearTimeOut = setInterval(() => {
       if (progressNums[0].innerText >= progressNum) {
           clearInterval(clearTimeOut)
           return
       }
       countNumber ()
   }, 2000 / 80)
}

实现效果图如下