Difference between revisions of "Progress"

Latest revision as of 11:12, 23 November 2019

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

</div>

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

</div>

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

</div>

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

</div>

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

</div>

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

</div>

</script> <style>

</style>

</html>

@@ Line 1: / Line 1: @@
 <html>
-<progress id="progress" value="0" max="1000" style="width: 80%; margin: auto 10%"/>
+<button onclick="$('.ipe-progress').toggleClass('done')">切换</button>
+<div class="ipe-progress" style="width:100%;">
+  <div class="progress-bar"></div>
+</div>
+<div class="ipe-progress" style="width:80%;">
+  <div class="progress-bar"></div>
+</div>
+<div class="ipe-progress" style="width:60%;">
+  <div class="progress-bar"></div>
+</div>
+<div class="ipe-progress" style="width:40%;">
+  <div class="progress-bar"></div>
+</div>
+<div class="ipe-progress" style="width:200px;">
+  <div class="progress-bar"></div>
+</div>
+<div class="ipe-progress" style="width:50px;">
+  <div class="progress-bar"></div>
+</div>
 <script>
-var goprogess = setInterval(function () {
-  if (typeof($) !== 'undefined') {
-    if (typeof x === 'undefined') x = 0;
-    if (x < 500) {
-      x = x + 41.6;
-    } else if (x < 800) {
-      x = x + 20;
-    } else if (x < 900) {
-      x = x + 10;
-    } else {
-      x = x + 5;
-    }
-    if (x > 985) clearInterval(goprogess);
-    $('#progress').val(x);
-  }
-}, 41.6);
 </script>
+<style>
+</style>
 </html>