//基本用法；
//
// 就是你每次运行的针和路程是长度一直滴呀；
function showInfo(){console.log("infoq");
}var timer=requestAnimationFrame(showInfo);cancelAnimationFrame(timer);//这个是我们基本setInterval 时间设置；
var progressTimer;
var btn=document.getElementById("btn");
var obj=document.getElementById("fuck");
var speed=5;
btn.onclick=function (){clearInterval(progressTimer); //清零的时候，我们额长度也清零地呀；obj.style.width = '0';progressTimer=setInterval(function (){if(parseInt(obj.style.width)<500){ //直接这样做是误差的，我们在js的运中是有提高过滴呀；obj.style.width=parseInt(obj.style.width)+speed+'px';obj.innerHTML=parseInt(obj.style.width)/5+"%";}else{clearInterval(progressTimer);}},16)
}//在来看看我们的setTimeout的做法；var progressTimer1;
var speed=5;
var shitBtn=document.getElementById("shitBtn");
var shitObj=document.getElementById("shit");
shitBtn.onclick=function (){clearTimeout(progressTimer1);shitObj.style.width='0';progressTimer1=setTimeout(function fn(){//临界值；if(parseInt(shitObj.style.width)<500){shitObj.style.width=parseInt(shitObj.style.width)+speed+'px';shitObj.innerHTML=parseInt(shitObj.style.width)/5+"%";timer = setTimeout(fn,16); //这里我们进行重复调用抵押；}else{clearTimeout(progressTimer1) }},16)}//然后var timer;
var speed=5;
var gangBtn=document.getElementById("gangBtn");
var gangObj=document.getElementById("gang");
gangBtn.onclick = function(){gangObj.style.width = '0';cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){if(parseInt(gangObj.style.width) < 500){gangObj.style.width = parseInt(gangObj.style.width) + 5 + 'px';gangObj.innerHTML =     parseInt(gangObj.style.width)/5 + '%';timer = requestAnimationFrame(fn);}else{cancelAnimationFrame(timer);}    });
}// 后面，我们要通过面向对象的方式，来进行改造滴啊；