定时器与 bootstrap中的进度条

来源：互联网发布：反差对焦算法编辑：程序博客网时间：2024/05/17 08:06
<h3>需要引入 js  以及样式文件才能显示出效果 复制以下的内容到项目中引入JS即可看到效果</h3><!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/><script>var x0 = 0var x1 = 0var x2 = 0var x3 = 0var zai = 0function countSecond0(){   x0 = x0+1　 document.haorooms.haoroomsinput0.value=x0　 meter0= setTimeout("countSecond0()", 400)$("#tt0").html(x0+"%")$("#tt0").css("width",x0+"%");if(document.haorooms.haoroomsinput0.value==100){clearTimeout(meter0);}}function countSecond1(){   x1 = x1+1　  document.haorooms.haoroomsinput1.value=x1　 meter1= setTimeout("countSecond1()", 300)$("#tt1").html(x1+"%")$("#tt1").css("width",x1+"%");if(document.haorooms.haoroomsinput1.value==100){clearTimeout(meter1);}}function countSecond2(){   x2 = x2+1　  document.haorooms.haoroomsinput2.value=x2　 meter2= setTimeout("countSecond2()", 200)$("#tt2").html(x2+"%")$("#tt2").css("width",x2+"%");if(document.haorooms.haoroomsinput2.value==100){clearTimeout(meter2);}}function countSecond3(){   x3 = x3+1　  document.haorooms.haoroomsinput3.value=x3　 meter3= setTimeout("countSecond3()", 100)$("#tt3").html(x3+"%")$("#tt3").css("width",x3+"%");if(document.haorooms.haoroomsinput3.value==100){clearTimeout(meter3);}}function zaixianTime(){$(".zaixian").val(zai)zai = zai+1setTimeout("zaixianTime()", 1000)}function zaixianTimes(){var s='<div style="margin:100px;">'s+= '<span style="float:left">在当前页面停留的时间<\/span>'s+= '<input class="zaixian" style="float:left;margin: 0px 20px;text-align:center;width:50px;border-style:none" type="text">'s+= '<span style="float:left">秒<\/span>'s+= '</\div>';$("body").append(s);}</script></head><html><body><form name="haorooms"style="margin:100px;display:none;">   <input type="text" name="haoroomsinput0"value="0" size=4 >     <input type="text" name="haoroomsinput1"value="0" size=4 >  <input type="text" name="haoroomsinput2"value="0" size=4 >    <input type="text" name="haoroomsinput3"value="0" size=4 ></form><h3 style="margin:100px 0 -80px 240px">当前进度:</h3> <div class="progress" style="width:400px;margin:100px;border: 1px solid gray">  <div id="tt0" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">      </div> </div>   <div class="progress" style="width:400px;margin:100px;border: 1px solid gray">  <div id="tt1" class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">      </div> </div>   <div class="progress" style="width:400px;margin:100px;border: 1px solid gray">  <div id="tt2" class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">      </div> </div>   <div class="progress" style="width:400px;margin:100px;border: 1px solid gray">  <div id="tt3" class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">      </div> </div><script src="js/jquery.min.js" type="text/javascript"></script><script src="js/bootstrap.min.js" type="text/javascript"></script><script>countSecond0()countSecond1()countSecond2()countSecond3()zaixianTime()zaixianTimes()</script></body> </html>
0 0
定时器 与 bootstrap中的进度条

定时器与 bootstrap中的进度条
