进度条制作

简单描述一下小例子：

这个进度条是可以通过js控制的，即点击按钮触发函数，动态的改变百分比的值与进度条的状态。当超过100%时，不再响应，按钮禁用。

html部分：

<div class="progress-bar">
		<div class='box'>
	        <div class='clip' id="context">
	        </div>
	    </div>
	    <span><span id="number">55</span><i>%</i></span>
	</div>
    <button onclick="processbar()" id="textbtn">进度条测试</button>

css部分

<style type="text/css">
 	 .progress-bar{
 	 	display: inline-block;
 	 }
 	 .progress-bar span{
 	 	font-size: 12px;
 	 	vertical-align: middle;
 	 	color: #3385ff;
 	 }
     .box {
	    border-radius: 30px;
	    width: 100px;
	    height: 10px;
	    background-color: #f9f7f7;
	    border: 1px solid #f1f0f0;
	    padding: 0px 2px;
	    display: inline-block;
	 }
     .clip {
	    background: -webkit-linear-gradient(left, #44e5ff,#02c8e8); 
	    background: -o-linear-gradient(right, #44e5ff,#02c8e8); 
	    background: -moz-linear-gradient(right, #44e5ff,#02c8e8); 
	    background: linear-gradient(to right, #44e5ff,#02c8e8);
	    width: 55px;
	    margin: 1px 0px;
	    box-shadow: 0px 0px 2px #0dd2ea;
	    height: 8px;
	    border-radius: 20px;
	}
</style>

 

js部分

<script type="text/javascript">	
	var Numq = document.getElementById("number");
	num=Numq.textContent;
	var bar = document.getElementById("context");
	var btn = document.getElementById("textbtn");
	function processbar(){
		num++;
	 	Numq.textContent=num;
	 	bar.style.width = num+'px';
	 	if(parseInt(num)>100){
	 		Numq.textContent=100;
	 		bar.style.width = 100+'px';
	 		btn.setAttribute("disabled","disabled");
	 	}
	 }

</script>

效果图如下：