动态进度条

2019独角兽企业重金招聘Python工程师标准>>>

 

<style>
 .progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
 #bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}
</style>

<script type="text/jscript" src="js/jquery1.11.3.min.js"></script>
<script type="text/javascript">
 function progressBar(){
  //初始化js进度条
  $("#bar").css("width","0px");
  //进度条的速度，越小越快
  var speed = 20;
  bar = setInterval(function(){
   nowWidth = parseInt($("#bar").width());
   //宽度要不能大于进度条的总宽度
   if(nowWidth<=200){
    barWidth = (nowWidth + 1)+"px";
    $("#bar").css("width",barWidth);
   }else{
    //进度条读满后，停止
    clearInterval(bar);
   } 
  },speed);
 }
</script>

html:

<input type="button" value="开始" onclick="progressBar()" />
 <div class="progressBar"><div id="bar"></div></div>

 

 

 

 

另外还有多项进度的：

<div class="fpwd-box">
				<!--<h5><b>忘记密码</b></h5>-->
				<div class="fpwd-top">
					<span style="width:0;" class="fp-jindu"></span>
					<div class="fp-step">
						<div class="fp-dcricle active-dash"><span class="active-fp">1</span></div>
						<p>验证身份</p>
					</div>
					<!------------fp-step2修改为fp-step-title2----->
					<div class="fp-step fp-step-title2">
						<div class="fp-dcricle"><span>2</span></div>
						<p>设置新密码</p>
					</div>
					<!------------fp-step3修改为fp-step-title3----->
					<div class="fp-step fp-step-title3">
						<div class="fp-dcricle"><span>3</span></div>
						<p>完成</p>
					</div>
				</div>
				<!----------忘记密码修改地方----------->
				<div class="fp-step1">
				    <p class="fp-p"><span class="fp-s">手机号 ：</span><input type="text" class="fp-username" placeholder="在此输入手机号"></p>
				    <p class="fp-p"><span class="fp-s">验证码：</span><input type="text" class="fp-yanzhengma"><input type="button" class="send-ver2 auth-a" value="获取验证码" onclick="settime(this)"></p>
			        <a class="fp-next" href="javascrpt:;">下一步</a>
				</div>
			    <div class="fp-step2" style="display: none;">
			    	<p class="fp-p"><span class="fp-s">新登录密码：</span><input type="text" class="fp-phonenumber" placeholder="在此输入密码"></p>
				    <p class="fp-p"><span class="fp-s">确认新密码：</span><input type="text" class="fp-phonenumber" placeholder="在此输入密码"></p>
			         <a class="fp-next" href="javascrpt:;">下一步</a>
			    </div>
			    <div class="fp-step3" style="display: none;">
			    	<div class="fp-paswd-ok">
						<img src="images/bangdingchenggong.png">
						<div class="fp-ok-r">
							<p>登录密码设置成功<a href="login.html">去登录</a></p>
							<p style="color:#CCCCCC;font-size: 0.8em;text-align: left;">请牢记此支付密码</p>
						</div>
				    </div>
			    </div>
			    <!------修改结束-------------->
			</div>

css在这里就不一一列了

<script>
			$(function(){
				$(".fp-step1 .fp-next").click(function(){
					var speed = 1;
					var fp_half=$(".fpwd-top").width()/2;
					bar=setInterval(function(){
						var now_w=parseInt($(".fp-jindu").width());
						if(now_w<=fp_half){
							 barWidth = (now_w + 1)+"px";
							$(".fp-jindu").css("width",barWidth);
						}else{
							clearInterval(bar);
							$(".fp-step-title2 .fp-dcricle").css("border","1px dashed #ffdd00");
							$(".fp-step-title2 .fp-dcricle span").css("background","#FFDD00");
							$(".fp-step1").hide();
							$(".fp-step2").show();
						}
					},speed);
				})
				$(".fp-step2 .fp-next").click(function(){
					var speed = 1;
					var fp_half=$(".fpwd-top").width();
					bar=setInterval(function(){
						var now_w=parseInt($(".fp-jindu").width());
						if(now_w<=fp_half){
							 barWidth = (now_w + 1)+"px";
							$(".fp-jindu").css("width",barWidth);
						}else{
							clearInterval(bar);
							$(".fp-step-title3 .fp-dcricle").css("border","1px dashed #ffdd00");
							$(".fp-step-title3 .fp-dcricle span").css("background","#FFDD00");
							$(".fp-step2").hide();
							$(".fp-step3").show();
						}
					},speed);
				})
			})
		</script>

 

 

 

转载于:https://my.oschina.net/yanyaya/blog/779296