使用JavaScript动态创建进度条-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_72687687/article/details/126292903

这篇博客展示了如何使用HTML、CSS和JavaScript实现一个动态的进度条。通过设置HTML结构，定义CSS样式，以及编写JavaScript代码来更新进度条的宽度和文字内容，最终达到动态加载效果。当进度达到100%时，进度条会显示'加载完成'。

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

进度条

HTML内容

<div class="wrapper">//外边框
			<div id="jd" class="first">//jd进度
			</div>
		</div>

css样式内容

	<style>
			.wrapper {
				width: 500px;
				height: 50px;
				border: 1px solid black;
				border-radius: 50px;
				margin: 0 auto;
				overflow: hidden;
			}

			.first {
				height: 50px;
				line-height: 50px;
				background-color: green;
				border-radius: 50px;
				position: relative;
				overflow: hidden;
				text-align: center;
			}
		</style>

js内容

<script>
			var width = 0;
			var timer;
			var _jd = document.getElementById("jd");//获取进度
			timer = setInterval(function() {
				width += 1;
				_jd.innerText = width + '%';
				if (width >= 100) {
					clearInterval(timer);
					_jd.innerText = "加载完成";
				}
				document.getElementsByClassName("first")[0].style.width = width + "%";
			}, 30);
</script>

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .wrapper {
               width: 500px;
               height: 50px;
               border: 1px solid black;
               border-radius: 50px;
               margin: 0 auto;
               overflow: hidden;
           }

           .first {
               height: 50px;
               line-height: 50px;
               background-color: green;
               border-radius: 50px;
               position: relative;
               overflow: hidden;
               text-align: center;
           }
       </style>
   </head>
   <body>
       <div class="wrapper">
           <div id="jd" class="first">

           </div>
       </div>
       <script>
           var width = 0;
           var timer;
           var _jd = document.getElementById("jd");

           timer = setInterval(function() {
               width += 1;
               _jd.innerText = width + '%';
               if (width >= 100) {
                   clearInterval(timer);
                   _jd.innerText = "加载完成";
               }
               document.getElementsByClassName("first")[0].style.width = width + "%";
           }, 30);
       </script>
   </body>
</html>