css 实现进度条

时间：2022-01-26 22:14:42
 <select id="progress" onchange="changeProgress(this)">

       <option value="10%">10%</option>

       <option value="20%">20%</option>

       <option value="30%">30%</option>

       <option value="40%">40%</option>

       <option value="50%">50%</option>

       <option value="60%">60%</option>

       <option value="70%">70%</option>

       <option value="80%">80%</option>

       <option value="90%">90%</option>

       <option value="100%">100%</option>

     </select>

     <div style="border:1px solid gray; width:200px; height:6px; border-radius:6px;">

       <div id="pro" style="height:100%; background-color:red; border-radius:6px;" ></div>

     </div>

     <script type="text/javascript">

     window.onload=function(){

       var p=document.getElementById("progress");

       var oPro=document.getElementById("pro");

       oPro.style.width=p.value;

     }

      function changeProgress(obj){

         var oPro=document.getElementById("pro");

         oPro.style.width=obj.value;

         console.log(obj.value);

      }

     </script>

公司让做东西的时候，顺手将这个css进度条写了一遍。记录一下

相关文章