js+html纯原生代码简单的下载对话框点击按钮自动读条

本文链接：https://blog.youkuaiyun.com/zhaozhen161/article/details/79599733

本文提供了一个小案例，展示了如何使用纯原生JavaScript和HTML创建一个下载对话框，点击按钮后，对话框显示下载进度，并提供取消下载的选项。当下载完成后，对话框内容和按钮状态会相应更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 这个小案例是：

页面初始只有一个button，上面显示文字【start Download】

点击button后，button文字变为【Downloading】,并弹出模态对话框

模态对话框的body部分，显示下载进度的文字表示和进度条表示（文字和进度条的进度要一致）button显示【Cancel Download】

下载结束后，文字和button内容会有变化

点击【close】按钮，关闭对话框，页面上的button文字显示回【Start Download】，如第一张图所示

代码如下：

html部分

<button class="button">start Download</button>
	<div class="load">
		<h1>File Download</h1>
		<p>Current Progress:0%</p>
		<div>
			<div class="black"></div>
		</div>
		<button class="end">Cancel Download</button>

css部分

<style>
	*{margin:0;padding:0;}
	.load{
		width:300px;
		height:250px;
		border:1px solid #000;
		position:absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
		display: none;
	}
	.load h1{
		width:100%;
		height:80px;
		background:#ccc;
	}
	.load p{
		height:30px;
		width:100%;
		/*text-align: center;*/
		text-indent: 1em;
	}
	.load>div{
		width:200px;
		height:50px;
		border:1px solid #ccc;
		margin:10px auto;
	}
	.load button{
		float:right;
		margin-top:20px;
		margin-right:30px;
	}
	.black{
		width:0;
		height:50px;
		background:#ccc;
	}
	.button{
		margin:10px;
	}
	</style>

js部分

<script>
		var but = document.querySelector('.button');
		var loading = document.querySelector('.black');
		var width = 0;
		but.onclick = function(evt){
			var load = document.querySelector('.load');
			var p = document.querySelector('p');
			var end = document.querySelector('.end');
			load.style.display = 'block';
			function wid (){
				width += 1;
				loading.style.width=width+'%';
				p.innerHTML = 'Current Progress:'+width+'%';
				but.innerHTML = 'loading';
				if(width>99){
					clearInterval(timer);
					p.innerHTML = 'Complete!';
					end.innerHTML = 'Close';

				}

			}
			end.onclick = function(){
				clearInterval(timer);
				load.style.display = 'none';
				but.innerHTML = 'start Download';
				location.reload();
			}

			
		var timer = setInterval(wid,30);
		}
	</script>

在这个小案例中处处是基础，纯原生,很基础的代码