三国杀的联想-前端页面进度条的生成_三国杀不显示进度条-CSDN博客

本文链接：https://blog.csdn.net/qq_43520419/article/details/119281802

三国杀，真好玩！欢迎加我好友来和我一起耍！三国杀
今天玩三国杀，看到进度条慢慢的加载，我又慢慢进入了联想的世界，想到各式各样的进度条，因为正在学习前端知识，于是决定自己做一个进度条试试！
关于进度条的概念，百度百科是这样解释的：
进度条即计算机在处理任务时，实时的、以图片形式显示处理任务的速度、完成度、剩余未完成的任务量的大小和可能需要的处理时间，一般以长方形条状显示。
由该概念可以概括出构成进度条的两大组件：任务量和完成度。
在清楚进度条的概念后，我决定每隔100ms加载一张图片、共加载一百张来模拟任务量，使用h5中input的range类型来实现进度条。
如图所示：
在这里插入图片描述

首先，在文档里放一个p标签来作提示语：

<p id="bai"></p>

然后放一个range类型的input标签来显示进度条：

<input type="range" name="" id="proc" value="0" />

放一个img标签模拟初始任务量：

<div id="asd">
			<img src="img/20201124032511.png" id="imag">
</div>

至此，样式和结构都有了，还缺一个动作，在script脚本中开始写动作：

<script type="text/javascript">
		function createimg(){
		var d=document.getElementById("asd")
		var image=document.createElement('img')
		image.src="img/20201124032511.png"
		d.appendChild(image)
		document.getElementById("proc").value++
        document.getElementById("bai").innerText="网页已加载"+document.getElementById("proc").value+"%"}
		var interval2=setInterval("createimg()",100);//每隔100ms执行一次函数，加载一张图片，等待加载100张图片后，进度条达到100%
		setTimeout(function() {clearInterval(interval2);},10600);//等待函数执行100次后，停止执行。
</script>

最终结果如下:
CSDN进度条

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="bai"></p>
		<input type="range" name="" id="proc" value="0" />
		<div id="asd">
			<img src="img/20201124032511.png" id="imag">
		</div>

	</body>
	<script type="text/javascript">
		var m=0;
		console.log(document.getElementById("imag").src)
		function createimg(){
		var d=document.getElementById("asd")
		var image=document.createElement('img')
		image.src="img/20201124032511.png"
		d.appendChild(image)
		document.getElementById("proc").value++
		if(document.getElementById("proc").value===100)
		{
			alert("网页已加载完成")
		}
		document.getElementById("bai").innerText="网页已加载"+document.getElementById("proc").value+"%"}
		var interval2=setInterval("createimg()",100);
		setTimeout(function() {clearInterval(interval2);},10600);
	</script>
</html>