JS实现网页进度条

最新推荐文章于 2024-08-02 18:20:19 发布

都ok

最新推荐文章于 2024-08-02 18:20:19 发布

阅读量1.3k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42193674/article/details/85238707

版权

1.在网页上设置一个Download按钮，对其进行样式改造，这里我使用margin-left和margin-top来设置button在网页中呈现的位置。

2.在js中改变进度条div的style中的width。当定时器每10ms刷新一次时，进度条中会有数值变化，而这个就是div.innerText,没刷新一次count++，也就是我们看见的1%、2%、3%......而进度条的div.style.width的值是呈2*count增加的，这就是进度条，而在div的css中已经将div的background-color设置成了蓝色了

3.给button设置一个onclick，当点击按钮时开始进度条的加载显示

代码实现：

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1 {
				width: 0px;
				height: 25px;
				background-color: blue;
				text-align: center;
				margin-left: 10.6cm;
				margin-top: 2cm;
			}

			#button {
				width: 100px;
				height: 20px;
				background-color: 	#C0C0C0;
				text-align: center;
				margin-left: 16cm;
				margin-top: 5cm;
			}
		</style>
	</head>
 
	<body>
		<button onclick&