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进度条写了一遍。记录一下
