倒计时联动进度条

<script type="text/javascript" src="jquery.js"></script>
<style>
.progress{
		width:100%;
		height:20px;
		margin-top:0px;
	}
	 .progress .progress-bar{
	 	width:100%;
		
	}


.progress{
    width: 50%;
    height: 30px;
    border: 1px solid #EDEDED;
    border-radius: 5px;
    background-color: #F5F5F5;
    box-shadow: 0 1px 1px #ccc inset;
    margin-top: 20px;
    overflow: hidden;
}
.progress .progress-bar{
    height: 100%;
    width: 0%;
    background-color: gray;
}
.progress .progress-bar-success{
    background-color: #5CB85C;
}
.progress .progress-bar-info{
    background-color: #5BC0DE;
}
.progress .progress-bar-warning{
    background-color: #F0AD4E;
}
.progress .progress-bar-danger{
    background-color: #D9534F;
}
.progress .progress-bar-striped{
    background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
}
.progress .active{
    animation:progress-bar-stripes 2s linear infinite;
}
@keyframes progress-bar-stripes {
    from {background-position: 40px 0;}
    to {background-position: 0 0;}
}
</style>
<div class="progress"> </div>
<div> </div>
<button id="btn" type="button">点击</button>
<script type="text/javascript">
var set='';
	var intDiff = parseInt(200); //倒计时总秒数量
	var v=0; //走完的速度
	var t= 0; //当前所走的时间
	var currt=0;//答对题目的加的时间和剩余时间的总和
	var currWidth=0;//当前倒计时的宽度和加过时间之后的宽度总长
	var t1=5;//每次加时的时间
	var endtime=0;//结束时间
	var barWidth=parseInt($(".progress-bar").width());//进度条的宽度
	var totalWidth=parseInt($(".progress").width());//总宽度
	var currWidth=0;//加时时进度条所走的路程
	v=$(".progress").width()/intDiff;
	
	//点击按钮加时
	 $("#btn").on("click",function() {
		clearInterval(set);
		//console.log(barWidth);
		//点击按钮时获取进度条所走的路程
		currWidth=parseInt(totalWidth-barWidth);
		
		//运行速度
		
		//走的当前路程所用的时间
		t=currWidth/v;
		
		//重置当前时间
		intDiff=parseInt(200-t+t1);
		//重置当前
		barWidth=parseInt(barWidth+t1*v);
	
	
		timer(intDiff);
		

	 })

//执行定时器
	timer(intDiff)
		
	//改变进度条宽度
	function change() {
		//每秒减少的距离
		barWidth -=v;
		//设置进度条的距离
		$(".progress-bar").width(barWidth);	

	}
	
	
	//倒计时
	function timer(intDiff) {
	  set=window.setInterval(function () {
	  	 parseInt(intDiff--);
	    var day = 0,
	      hour = 0,
	      minute = 0,
	      second = 0;//时间默认值
	      
	    if (intDiff > 0) {
	      day = Math.floor(intDiff / (60 * 60 * 24));
	      hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
	      minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
	      second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
	    } 



      	if (minute <= 9) minute = '0' + minute;
    	if (second <= 9) second = '0' + second;
    	$('#day_show').html(day + "天");
	    $('#hour_show').html( hour + '时');
	    $('#minute_show').html( minute + '分');
	    $('#second_show').html( second + '秒');

		change();
	    if(intDiff<0) {
	    	clearInterval(set);
	    }
	   
	  }, 1000);
		
	}
</script>