定时器与 bootstrap中的进度条

最新推荐文章于 2023-05-22 12:43:48 发布

J1271820107

最新推荐文章于 2023-05-22 12:43:48 发布

阅读量2.6k

点赞数

分类专栏： HTML JS 文章标签： bootstrap 定时器

本文链接：https://blog.csdn.net/J1271820107/article/details/52457343

版权

JS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

<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 = 0
var x1 = 0
var x2 = 0
var x3 = 0
var zai = 0
function 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+1
setTimeout("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>