进度条

最新推荐文章于 2024-08-11 18:40:36 发布

trytry0

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量138

点赞数

文章标签： javascript jquery html5

本文链接：https://blog.csdn.net/trytry0/article/details/105351510

版权

进度条

像这样，使用jquery-1.11.0.min.js，我是老师给的，如果需要学习使用，可以告诉我。网上也有很多可以下载的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
    .progress-bar{
    	background :#ddd;
    	box-shadow: 0 0 0;
    	height:5px;
    	margin : 0 0 45px;
    	position: relative;
    	width: 100%;
    	border-radius: 5px;
    }
    .progress-bar-text{
    	color: #333333;
    	font-size: 15px;
    	margin-bottom: 9px;
    }
    .progress-bar>span{
         display: block;
         height:100%;
         width:0;
         border-radius: 5px;
    }
    .progress-bar>span{
    	background:#F8C018;
    	background-image: linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856dc);
    }
    .text-block{
    	width: 600px;
    	border-radius:5px;
    	border-color: #333333;
    }
</style>
</head>
<body>
<div class="text-block">
	<div class="progress-bar-linear">
	<p class="progress-bar-text">西藏
    <span class=“float_right>进度条的值</ span>
	</p>
	 <div class="progress-bar">
          <span data-percent="80"></span>
	</div>
	
	</div>
		<div class="progress-bar-linear">
	<p class="progress-bar-text">北京
 <span class=“float_right>进度条的值</span>
	</p>
	 <div class="progress-bar">
          <span data-percent="95"></span>
	</div>
	
	</div>
	<div class="progress-bar-linear">
	<p class="progress-bar-text">曼谷
    <span class=“float_right>进度条的值</ span>
	</p>
	 <div class="progress-bar">
          <span data-percent="85"></span>
	</div>
	
	</div>
	<div class="progress-bar-linear">
	<p class="progress-bar-text">西雅图
    <span class=“float_right>进度条的值</ span>
	</p>
	 <div class="progress-bar">
          <span data-percent="98"></span>
	</div>
	
	</div>

	</div>
</body>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script>
  $(function(){
  	$('.progress-bar>span').each(function(){
  		var $this=$(this);
  		$this.parent().prev().children("span");
  		console.log($this.parent().prev().children("span"));
  		var width=0;
  		var timer=setInterval(function(){
  			width++;
  			$this.css ('width',function(){
  				$this.parent().prev().children("span").html(width+'%');
  				if(width>=parseInt($this.data('percent'))){
  					clearInterval(timer);
  				}
  				return width+'%';
  			});
  		},50);
  	});
  });
</script>
</html>

trytry0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进度条

进度条像这样，使用jquery-1.11.0.min.js，我是老师给的，如果需要学习使用，可以告诉我。网上也有很多可以下载的。<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css"> .progress-bar{ ...
复制链接

扫一扫