Difference between revisions of "Progress"

Revision as of 19:26, 21 November 2019

 <div class="bar"></div>

</div>

</script> <style>

 .progress {
   width: 80%;
   margin: auto 10%;
   height: 1em;
   border: 1px solid #c5c5c5;
   padding: 2px;
 }

 .pregress .bar {
   height: 100%;
   width: 0%;
   background: #a3a2a2;
 }

 .progress .bar.done {
   width: 100%;
   transition: width 3s ease-in-out;
 }

</style>

</html>

@@ Line 1: / Line 1: @@
 <html>
 <button onclick="start()">开始</button>
-<div id="progress" style="width: 80%; margin: auto 10%; height: 1em; border: 1px solid #c5c5c5; padding: 2px"><div id="bar" style="transition: width .1s ease-in-out; height: 100%; width: 0%; background: #a3a2a2;"><span id="num"></span></div></div>
+<div class="progress">
+  <div class="bar"></div>
+</div>
 <script>
-function start() {
-  var goprogess = setInterval(function () {
-    if (typeof x === 'undefined') x = 0;
-    x = Number($('#progress #bar').css('width').replace('%','').replace('px',''));
-    if (x < 50) {
-      x = x + 1;
-    } else if (x < 80) {
-      x = x + 0.5;
-    } else if (x < 90) {
-      x = x + 0.25;
-    } else {
-      x = x + 0.125;
-    }
-    if (x > 100) {
-      clearInterval(goprogess);
-      $('#progress').after('<center id="done">DONE</center>');
-      $('#progress #bar').delay(3000).css('width','0%');
-    } else {
-      $('#progress #bar').css('width',x+'%');
-      $('#progress #num').text(x);
-      $('#done').remove();
-    }
-  }, 100);
-}
 </script>
+<style>
+  .progress {
+    width: 80%;
+    margin: auto 10%;
+    height: 1em;
+    border: 1px solid #c5c5c5;
+    padding: 2px;
+  }
+  .pregress .bar {
+    height: 100%;
+    width: 0%;
+    background: #a3a2a2;
+  }
+  .progress .bar.done {
+    width: 100%;
+    transition: width 3s ease-in-out;
+  }
+</style>
 </html>