mtjmtj7的小站
mtjmtj7的小站
© mtjmtj7
All Rights Reserved.

Jquery之进度条君

进度条君,撑,撑住哇!!!∑(゚Д゚ノ)ノ

布局使用bootstrap(进度条也是_(:з」∠)_ )

原理就是通过—获取输入框的值,然后修改进度条的参数,剩下的就是bootstrap来做啦ヽ( ̄▽ ̄)ノ

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>进度条</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</head>
	<body>
		<div class="container-fluid">
			<div class="panel panel-default">
			  <div class="panel-heading">
			    <h3 class="panel-title">进度条君</h3>
			  </div>
			  <div class="panel-body">
			    输入进度条君要到达的位置(最大100 哦)<br /><br />
			    <form>
				  <input type="text" class="form-control" placeholder="请输入" name="txt" id="txt" value="">  <br /><br />
				  <input type="button" name="btn" id="btn" value="开始!" class="btn btn-info"/>
			    </form>
			  </div>
			  
			 	<div class="progress">
				  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"  aria-valuenow="0"  aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="ans">
				    <span class="sr-only" id="res">111</span>
				  </div>
				</div>

			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	$('#btn').click(function(){
		$tt = $('#txt').val();
		
		$('#ans').css("width",$tt+"%");
		$('#res').html($tt);
	})
</script>

用到的几个方法:

  1. val()    获取输入的value值。
  2. css()   设置该标签的css值。

html($val)   span赋值


三大取值赋值法宝:htnl() css() text()

text()   span取值方法

打赏
2017-07-25
189 阅读
关键字:
暂无评论

发表评论