css+js实现静态和动态条形/环形进度条展示

最新推荐文章于 2023-07-04 17:24:04 发布

zcl_1

最新推荐文章于 2023-07-04 17:24:04 发布

阅读量684

点赞数

分类专栏：学习笔记文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_41656025/article/details/105169872

版权

学习笔记专栏收录该内容

27 篇文章 1 订阅

订阅专栏

css+js实现静态和动态进度条展示

css+js实现静态和动态进度条展示

css+js实现静态和动态进度条展示

css+js实现静态和动态进度条展示的思路见代码：
在这里插入图片描述

<html> 
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>进度条缓冲</title>
		<style type="text/css">
			*{margin:0;padding:0;}
		
			#wai{width:200px; height:20px; margin:10px 0px; border:1px solid #666;}
			#nei{width:0%; height:20px; background-color:#F00; float:left;}
			
			.wrap{width:110px;height:110px;position:relative;border-radius:50%;background:green;}
			.leftWrap{width:55px;height:110px;margin:0px;position:absolute;left:0;top:0;overflow:hidden;}
			.rightWrap{width:55px;height:110px;margin:0px;position:absolute;right:0;top:0;overflow:hidden;}
			.left{width:55px;height:110px;border-radius:55px 0 0 55px;background:#EBEEF5;transform-origin:right center;}
			.right{width:55px;height:110px;border-radius:0 55px 55px 0;background:#EBEEF5;transform-origin:left center;}
			.proportion{width:96px;height:96px;line-height:96px;position:absolute;top:7px;left:7px;background:#fff;border-radius:50%;text-align:center;font-size:20px;}
		</style>
	</head>
	<body>
		<!--环形进度条 -->
		<div class="wrap">
		　　<div class="leftWrap">
				<div class="left"></div>
			</div>
			<div class="rightWrap">
				<div class="right"></div>
			</div>
			<div class="proportion">40%</div>
		</div>
		<!--条形进度条 -->
		<div id="wai">
			<div id="nei"></div>
		</div>
		<input type="button" value="开始缓冲" onclick="move()"/>
	</body>
	<script type="text/javascript">
	// 静态展示环形进度条
		var num = parseInt(document.getElementsByClassName("proportion")[0].innerText);
		var num_round = parseInt(document.getElementsByClassName("proportion")[0].innerText)*3.6;
		if(num_round<=180){
		　　document.getElementsByClassName("left")[0].style.transform = "rotate(" + num_round + "deg)";
		}else{
		　　document.getElementsByClassName("left")[0].style.transform = 'rotate(' + 180 + 'deg)';
		　　document.getElementsByClassName("right")[0].style.transform = 'rotate(' + (num_round -180) + 'deg)';
		}
		// 静态展示条形进度条
		console.log(num,typeof(num))
		document.getElementById("nei").style.width = num + '%';
		
		//动态展示进度条
		var a=0;
		function move(){
			if(a<100){
				a++;
			}
			// 条形动态进度条
			document.getElementById("nei").style.width =a + "%";
			// 环形动态进度条
			let b = a*3.6;
			if(b <= 180){
			　　document.getElementsByClassName("left")[0].style.transform = "rotate(" + b + "deg)";
			document.getElementsByClassName("right")[0].style.transform = 'rotate(' + 0 + 'deg)';
			}else{
			　　document.getElementsByClassName("left")[0].style.transform = 'rotate(' + 180 + 'deg)';
			　　document.getElementsByClassName("right")[0].style.transform = 'rotate(' + (b -180) + 'deg)';
			}
			window.setTimeout("move()",5);
		}
	</script>
</html>

zcl_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css+js实现静态和动态条形/环形进度条展示

css+js实现静态和动态进度条展示css+js实现静态和动态进度条展示css+js实现静态和动态进度条展示css+js实现静态和动态进度条展示的思路见代码：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&...
复制链接

扫一扫