css 实现进度条

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