css 实现进度条

 1 <select id="progress" onchange="changeProgress(this)">
 2       <option value="10%">10%</option>
 3       <option value="20%">20%</option>
 4       <option value="30%">30%</option>
 5       <option value="40%">40%</option>
 6       <option value="50%">50%</option>
 7       <option value="60%">60%</option>
 8       <option value="70%">70%</option>
 9       <option value="80%">80%</option>
10       <option value="90%">90%</option>
11       <option value="100%">100%</option>
12     </select>
13     <div style="border:1px solid gray; width:200px; height:6px; border-radius:6px;">
14       <div id="pro" style="height:100%; background-color:red; border-radius:6px;" ></div>
15     </div>
16     <script type="text/javascript">
17     window.onload=function(){
18       var p=document.getElementById("progress");
19       var oPro=document.getElementById("pro");
20       oPro.style.width=p.value;
21     }
22      function changeProgress(obj){
23         var oPro=document.getElementById("pro");
24         oPro.style.width=obj.value;
25         console.log(obj.value);
26      }
27     </script>

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

 

转载于:https://www.cnblogs.com/dolphin-gjh/p/5106565.html