Js实现进度条

最新推荐文章于 2023-08-29 21:43:55 发布

VIP文章豆仔的小幸运

最新推荐文章于 2023-08-29 21:43:55 发布

阅读量245

点赞数

文章标签： js

本文链接：https://blog.csdn.net/FLJ1027/article/details/103341288

版权

实现简单的进度条，
运用到setInterval，xx.style.width = “xxpx”;通常我们不在行内设置样式，所以这个代码一般用作设置，不用作获取。

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		*{margin: 0;padding: 0;}
		#box {
			width: 500px;
			height: 100px;
			box-shadow: 0 0 10px red;
			margin: 0 auto;
			position: relative;
			border-radius: 50px;
		}

		#box p {
			height: 100px;
			border-radius: 50px;
			position: absolute;
			background: red;
			color: #FFFFFF;
			text-align: center;
			line-height: 100px;
		}
	</style>
</head>
<body>
	<div id="box">
		<p><span></span></p>
	</div>
</body>
<script>
	var obox = document.querySelector("#box");
	var op = document.querySelector("#box p");
	var ospan = document.querySelector("#box span")
	//定义变量来确定目标长度
	var target = obox.offsetWidth;
	//定义计时器
	var t;
	//定义步长,即每次增加的长度

最低0.47元/天解锁文章

豆仔的小幸运

关注

0
点赞
踩
1

收藏

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

实现简单的进度条，运用到setInterval，xx.style.width = “xxpx”;通常我们不在行内设置样式，所以这个代码一般用作设置，不用作获取。<head> <meta charset="utf-8"> <title></title> <style> *{margin: 0;padding: 0;} #b...
复制链接

扫一扫