html5+css3+jquery实现实时进度条

最新推荐文章于 2024-07-19 15:32:49 发布

Supreme_lwl

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量404

点赞数

分类专栏： html5 jQuery

本文链接：https://blog.csdn.net/qq_42515626/article/details/105341454

版权

html5 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html>
<head>
	<title>进度条</title>
	<meta charset="utf-8" />
	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	<style type="text/css">
		.progress-bar{
			background: #ddd;
			box-shadow: 0 0 0;
			height: 5px;
			margin: 10px 0;
			position: relative;
			width: 100%;
			border-radius: 8px;
		}
		.progress-bar-text{
			color: #333;
			font-size: 15px;

		}
		.progress-bar>span{
			display: block;
			height: 100%;
			width: 0px;
			border-radius: 8px;

		}
		.progress-bar>span{
			background: #F8c018;
			/*渐变效果*/
			background-image: linear-gradient(to right,red,yellow,blue) ;
		}
		.progress-bar-linear{
			margin-top: 50px;
		}
		hr{
			border: 1px dashed #b3aaaa;
		}
	</style>
</head>
<body>
	<div class="progress-bar-head">
		<h2>地区点击率</h2>
		<hr>
		<p>关注度如下：</p>
	</div>
	<div class="progress-bar-box">
		<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 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="80"></span>
		</div>
	</div>
	</div>
	
	<script type="text/javascript">
		$(function(){
			$(".progress-bar > span").each(function(){//获取到加载进度条的位置
				var width = 0;
				var self = this;//改变this指向，setInterval内部this指向的是它内部的上下文
				var timer = setInterval(function(){//设置定时器
					width++;
					$(self).css('width',function(){
						$(self).parent().prev().children("span").html(width+'%');//获取到显示进度的位置并赋值
						if(width >= parseInt($(self).data("percent"))){//data-percent是自定义属性，如果当前宽度达到了要求，则清除定时器
							clearInterval(timer);
						}
						return width+'%';//返回当前的宽度，并赋值给'width'样式，以达到实时更新的效果
					})
				},20);

			});
		});


	</script>
</body>
</html>

Supreme_lwl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5+css3+jquery实现实时进度条

效果：完整代码：<!DOCTYPE html><html><head> <title>进度条</title> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></scri...
复制链接

扫一扫

专栏目录