JS实现动态进度条

&lt;div class="wrapper"&gt;//外边框
			&lt;div id="jd" class="first"&gt;//jd进度
			&lt;/div&gt;
		&lt;/div&gt;

css 样式内容

	<style&gt;
			.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 char set=”utf-8″>
       <title></title>
       <style>
           .wrap per {
               width: 500px;
               height: 50px;
               b order: 1px so lid black;
               border-radius: 50p x;
               mar gin: 0 auto;
               overflow: hid den;
           }

           .first {
               height: 50p x;
               line-height: 50p x;
               background–color: green;
               border-radius: 50px;
               position: rel a ti ve;
               overflow: hid den;
               text–align: center;
           }
       </style>
   </head>
   <body>
       <div class=”wrap per“>
           <div id=”jd” class=”first“>

           </div>
       </di v>
       <script>
           var width = 0;
           var timer;
           var _jd = document.getElementById(“jd”);

           timer = setInterval(function() {
               width += 1;
               _jd.innerText = wi dth + ‘%’;
               if (wi dth >= 100) {
                   clearInterval(timer);
                   _jd.innerText = “加载完成”;
               }
               document.getElementsByClas sName(“first“)[0].style.wi dth = wi dth + “%”;
           }, 30);
       </script>
   </body>
</html>